Stop flutter scrolling gridview listtiles appearing below scroll container

See more:

Gridview

Flutter

I have a Flutter scrolling GridView builder that looks like it renders the ListTiles below the Container the GridView is placed in. It appears it renders placeholder grid list tiles even when they are not within the Container bounds.

It looks like for some reason that the GridView ListTiles appear below the parent container and show up under other widgets below the Container holding the GridView.

In this example the GridView is placed within a Container that is then placed as a child under a parent Scrollbar that is a child widget in a Column. The GridView appears to render the grid ListTiles (renders the background Tile color but not the Tile contents) outside its parent container, appearing as Tiles under the other child widgets of the parent Column widget. See screen grabs below.

Grid List tiles under the Container

<pre>import 'package:flutter/material.dart';
import 'package:scroll5/models/task_model.dart';

/// This is the stateful widget that the main application instantiates.
class ScrollListWidget extends StatefulWidget {
  final List<TaskCard> _list;

  ScrollListWidget({Key? key})
      : _list = [],
        super(key: key);
  const ScrollListWidget.withList(
    List<TaskCard> list, {
    Key? key,
  })  : _list = list,
        super(key: key);

  @override
  State<ScrollListWidget> createState() => _ScrollListStatefulWidgetState();
}

/// This is the private State class that goes with MyStatefulWidget.
class _ScrollListStatefulWidgetState extends State<ScrollListWidget> {
  @override
  Widget build(BuildContext context) {
    return Container(height: 240, child: GridView.builder(
     shrinkWrap: true,
      physics: ScrollPhysics(),
      itemCount: widget._list.length,
          itemBuilder: (context, index) => WordTile(
              widget._list[index].taskName(), widget._list[index].score()),
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
            childAspectRatio: 4,
         ),
    ));
  }
}

class WordTile extends StatelessWidget {
  final String word;
  final int score;

  const WordTile(this.word, this.score, {super.key});

  @override
  Widget build(BuildContext context) {
    return ListTile(
        tileColor: Colors.green.withOpacity(.4), title: Text(word));
  }
}`

And main.dart

@override
Widget build(BuildContext context) {
  // This method is rerun every time setState is called, for instance as done
  // by the _incrementCounter method above.
  //
  // The Flutter framework has been optimized to make rerunning build methods
  // fast, so that you can just rebuild anything that needs updating rather
  // than having to individually change instances of widgets.
  return Scaffold(
    appBar: AppBar(
      // Here we take the value from the MyHomePage object that was created by
      // the App.build method, and use it to set our appbar title.
      title: Text(widget.title),
    ),
    body: Center(
      // Center is a layout widget. It takes a single child and positions it
      // in the middle of the parent.
      child:
      Column(children: [
      Scrollbar(
        controller: _scrollController,
        thickness: 8,
        interactive: true,
        thumbVisibility: true,
        child:ScrollListWidget.withList(_taskList)
      ),
      Text("Bye",style: TextStyle())])),
      floatingActionButton: FloatingActionButton(
      onPressed: _incrementCounter,
      tooltip: 'Increment',
      child: const Icon(Icons.add)));
  // This trailing comma makes auto-formatting nicer for build methods.
}`

What I have tried:

Tried setting cacheExtent, putting a container following the GridView within a Column etc. Always seems that the scrolling GridView ListTiles not shown in the Scrolled view appear cached and are shown below the container and any subsequent widgets.