Sticky Header and GridView with large amount of items rendering problems

Question

On my Flutter app, I have this implementation of my layout

CustomScrollView(
  controller: _scrollController,
  slivers: [
    SliverList(
        delegate: SliverChildBuilderDelegate((context, index) {
      if (index == 0) {
        return myTopBannerWidget();
      } else {
        return StickyHeader(
          header: myTopStickyMenu(),
          content: myGridView(myList),
        );
      }
    }, childCount: 2)),
  ],
);

Widget myGridView(List<Object> list) {
    return GridView.builder(
        physics: ClampingScrollPhysics(),
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
           mainAxisExtent: myExtent,
           crossAxisSpacing: 0,
           mainAxisSpacing: mySpacing,
           crossAxisCount: 2,
        ),
        shrinkWrap: true,
        itemCount: myList.length,
        itemBuilder: (context, index) {
           return MySingleWidget(list[index]);
        },
    );
}

Where on scroll, myTopBannerWidget disappear, myTopStickyMenu stay sticked on top, and myGridView content scroll. The problem is that list passed to myGridView is very huge (around 2000 elements), and gridview build all MySingleWidgets before rendering it, slowing incredibly down the app. How i can tell gridview to build only visible items, and build the others when necessary (and keep stickyHeader behavior)?

Answer 1

think you are doing what you are asking to do!

builder named constructor main job is to build children (items) on demand, in which when the user scrolls it builds the next child.

GridView.builder constructor is appropriate for grid views with a large (or infinite) number of children because the builder is called only for those children that are actually visible.

hope that the slowness because of you are running in debug mode.