I have this structure of an app:

  Scaffold(
          extendBody: true,
          extendBodyBehindAppBar: false,
          body: NotificationListener(
            onNotification: _handleScrollNotification,
            child: CustomScrollView(
              controller: _scrollController,
              physics: const BouncingScrollPhysics(parent: AlwaysScrollableScrollPhysics()),
              slivers: <Widget>[
                SliverAppBar(
                  floating: true,
                  snap: false,
                  pinned: true,
                    // Some code here
                ),
                CupertinoSliverRefreshControl(
                    // Some code here
                ),
                SliverList(
                  delegate: SliverChildBuilderDelegate(
                    childCount: 1,
                    // addAutomaticKeepAlives: true,
                    (context, index) => Container(
                      padding: screenContentPadding,
                      child: SingleChildScrollView(
                        child: Column(
                          children: [
                            Center(
                              child: SizedBox(
                                // height: MediaQuery.sizeOf(context).height,
                        
                                // Problem lies down here
                                child: MasonryGridView.count(
                                  primary: false,
                                  shrinkWrap: false,
                                  cacheExtent: 100.0,
                                  addAutomaticKeepAlives: false,
                                  crossAxisCount: 2,
                                  itemBuilder: (context, index) {
                                    return items[index];
                                  },
                                ),
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),

Note: I am using Flutter staggered grid view plugin, and from that plugin I used the MasonryGridView class.

So, from what I’ve read, without a shrinkwrap, a long list items would not be rendered all at once, only the visible ones. That’s my target for MasonryGridView which I have a lot of items there.

My situation:
At first, when I set shrinkwrap to true, the only problem I had is just rendering issue (laggy behaviour) which I would want to fix.

But when I set shrinkwrap to false, it got angry at me saying that i have unlimited height, or something like that, so yeah, I uncommented this line:

... height: MediaQuery.sizeOf(context).height, ... of the widget SizedBox().

So ok, it’s not complaining anymore about the unlimited height thing, but now I’m complaining to it that my sliverAppBar isn’t working as it supposed to!

So I tried to put a NeverScrollableScrollPhysics() as the physics parameter for the MasonryGridView class. The SliverAppBar is working fine, but now I’m getting cropped item view (from the MasonryGridView), since MediaQuery.sizeOf(context).height only covers some of the items. Then I tried to extent the length of SizedBox based on the children height of MasonryGridView not depending on MediaQuery.sizeOf(context).height anymore, but you know what? The shrinkwrap isn’t working, it’s back rendering the whole items all at once.

I guess that’s because now flutter thinks that the whole SizedBox area (which covers all of MasonryGridView children) acted as if it’s the whole visible view, so now it’s rendering all children in the visible view all at once.

How can I fix that laggy behaviour?