Flutter GridView: how to don't generate items when GridView is not primary

Question

I try to make an apps using long GridView with complexe item. I use GridView.builder which is optimize and it creates visible items (and it do the job !). But in my case, I need some widget before and I must add Column() and SingleChildScrollView.

When I do that I need to change GridView.builder with primary=false and shrinkWrap: true. But now, all GridView items are generated.

EDIT: New demo My wanted behavior is the mode "ColumnWithGrid".

Check this demo to understand issue.

• Press top buttons to switch modes: open Console and check log

https://dartpad.dev/?id=4f60ffbf656767a6e5c5bccc280acd3a

I think "shrinkWrap" property must stay to false but I never success to keep it in this case.

My question:

• How to use GridView.builder properly when I need to include it inside Column() or whatever ?
• How to make the mode "ColumnWithGrid" without generate full list (using dev.pub, ...) ?

Thanks

Solution 1

After some search and experiment, I found some posts about this topic (which is true for GridView or ListView widget) and my conclusion is :

GridView doesn't work like I expect !

When I create just a single GridView, it's like I create a container of my full device area and I put GridView inside.

This "hidden container" just keep info visible inside this container area.

So if I include my GridView inside Column without any container, it doesn't create it for me and unroll all my data to compute properly size.

The feature that expected is : GridView computes only items at screen and unroll virtually data (so manage local/global slider position to create only item inside visible area).

I update my demo to show the effect about all cases.

Sources:

• https://docs.flutter.dev/cookbook/lists/long-lists
• https://medium.com/saugo360/flutter-creating-a-listview-that-loads-one-page-at-a-time-c5c91b6fabd3

Solution 2

A CustomScrollView in combination with SliverList and SliverGrid can be used to achieve lazy loading.

CustomScrollView(slivers: [
  SliverList(
    delegate: SliverChildListDelegate([
      const Center(
        child: Text(
          "Header",
          style: TextStyle(fontSize: 40),
        ),
      ),
    ]),
  ),
  SliverGrid(
    gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: 3,
      crossAxisSpacing: 10,
      mainAxisSpacing: 10,
    ),
    delegate: SliverChildBuilderDelegate(
      (context, index) {
        print("generate the item $index");
        return Container(color: Colors.blue);
      },
      childCount: 100,
    ),
  ),
]),

https://dartpad.dev/?id=9633305d9a2daa0905de852fa003aba1