using multiple SliverMasonryGrid in a CustomScrollView

[sgbai78]

When using multiple SliverMasonryGrid in a CustomScrollView to draw a grid with different crossAxisCount, the scroll position is reset when scrolling the first SliverMasonryGrid.

This was not an issue when using multiple SliverLists or SliverGrid.

I used the code like this.

@override
  Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: [
        SliverAppBar(
          flexibleSpace: FlexibleSpaceBar(
            background: Image.network(
              'https://cdn.pixabay.com/photo/2016/09/30/14/56/venetian-1705528_960_720.jpg',
              fit: BoxFit.cover,
            ),
            collapseMode: CollapseMode.none,
          ),
          expandedHeight: 150,
        ),
        SliverPadding(
          padding: const EdgeInsets.only(top: 8, left: 8, right: 8, bottom: 8),
          sliver: SliverMasonryGrid.count(
            crossAxisCount: 2,
            mainAxisSpacing: 8,
            crossAxisSpacing: 8,
            childCount: _items.length,
            itemBuilder: (_, index) {
              return Container(
                height: 200,
                color: Colors.grey,
                child: Center(
                  child: Text('Grid Item $index'),
                ),
              );
            },
          ),
        ),
        SliverPadding(
          padding: const EdgeInsets.only(top: 8, left: 8, right: 8, bottom: 8),
          sliver: SliverMasonryGrid.count(
            crossAxisCount: 1,
            mainAxisSpacing: 8,
            crossAxisSpacing: 8,
            childCount: _items.length,
            itemBuilder: (_, index) {
              return Container(
                height: 200,
                color: Colors.grey,
                child: Center(
                  child: Text('Grid Item $index'),
                ),
              );
            },
          ),
        ),
        SliverPadding(
          padding: const EdgeInsets.only(top: 8, left: 8, right: 8, bottom: 8),
          sliver: SliverMasonryGrid.count(
            crossAxisCount: 1,
            mainAxisSpacing: 8,
            crossAxisSpacing: 8,
            childCount: _items.length,
            itemBuilder: (_, index) {
              return Container(
                height: 200,
                color: Colors.grey,
                child: Center(
                  child: Text('Grid Item $index'),
                ),
              );
            },
          ),
        ),
      ],
    );
  }

[Mr-yuwei]

same problem

[DaniyalDolare]

I am also having same problem and same issue is already reported in this repository. See here #286

[aaron-chu]

I have a similar problem using SliverMasonryGrid and SliverList in CustomScrollView. The SliverList is placed below the SliverMasonryGrid, and the scroll position jumps to the SliverMasonryGrid when I scroll down to SliverList. I tried to replace SliverList with a widget wrapped in SliverBoxToAdapter, but the problem still occurs.

[phucdth12a]

same problem, any solution for this.

[CrypticVader]

Looks like there is a related issue with flutter's SliverGrid https://github.com/flutter/flutter/issues/136573