Scrolling is interrupted when using multiple SliverMasonryGrid

[shimomiya-k]

Scrolling does not work when two SliverMasonryGrids are placed inside a CustomScrollView.

Is there any solution to this?

https://user-images.githubusercontent.com/78458737/216241146-dbef5c8e-e3c5-4a4d-bb86-6579b3115be4.mov

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: CustomScrollView(
        slivers: [
          // Section1
          SliverPadding(
            padding: const EdgeInsets.only(top: 16.0, right: 16.0, left: 16.0),
            sliver: SliverMasonryGrid.count(
              crossAxisCount: 2,
              crossAxisSpacing: 16.0,
              mainAxisSpacing: 16.0,
              childCount: 1,
              itemBuilder: (context, index) {
                return Card(
                  child: SizedBox(
                    height: 100.0,
                    child: Center(
                      child: Text('section-1-$index'),
                    ),
                  ),
                );
              },
            ),
          ),

          // Section2
          SliverPadding(
            padding: const EdgeInsets.only(top: 16.0, right: 16.0, left: 16.0),
            sliver: SliverMasonryGrid.count(
              crossAxisCount: 2,
              crossAxisSpacing: 16.0,
              mainAxisSpacing: 16.0,
              childCount: 100,
              itemBuilder: (context, index) {
                return Card(
                  child: SizedBox(
                    height: 100.0,
                    child: Center(
                      child: Text('section2-$index'),
                    ),
                  ),
                );
              },
            ),
          ),
          const SliverToBoxAdapter(child: SafeArea(child: SizedBox())),
        ],
      ),
      // This trailing comma makes auto-formatting nicer for build methods.
    );
  }

 % flutter doctor   
Doctor summary (to see all details, run flutter doctor -v):
[!] Flutter (Channel stable, 3.7.1, on macOS 12.6 21G115 darwin-arm64, locale ja-JP)
    ! Warning: `dart` on your path resolves to /opt/homebrew/Cellar/dart/2.17.6/libexec/bin/dart, which is not inside your current Flutter SDK checkout at
      /Users/kshimomiya/fvm/versions/stable. Consider adding /Users/kshimomiya/fvm/versions/stable/bin to the front of your path.
[✓] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
[✓] Xcode - develop for iOS and macOS (Xcode 14.2)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.2)
[✓] VS Code (version 1.74.3)
[✓] Connected device (3 available)
[✓] HTTP Host Availability

! Doctor found issues in 1 category.

[MichalNemec]

ran into same issue. Would appreciate some solution. For me it happens only when crossAxisCount is > 1 and im using SliverMasonryGrid.count

[hi6724]

I have same issue. does there any solution with crossAxisCount 2?

[DaniyalDolare]

I am also getting same issue when using two SliverMasonaryGrid in a CustomScrollView. The scroll just shift to top gridview when the top grid view is not visible in viewport. It is like infinite scroll. Here's the code and output video:

import 'dart:math';
import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

class MyScrollingWidget extends StatelessWidget {
  const MyScrollingWidget({super.key});

  @override
  Widget build(BuildContext context) {
    final heights =
        List.generate(100, (index) => 50 + 10 * Random().nextInt(5).toDouble());
    return Scaffold(
      appBar: AppBar(
        title: const Text("Example"),
      ),
      body: CustomScrollView(
        physics: const AlwaysScrollableScrollPhysics(),
        slivers: [
          const SliverToBoxAdapter(
            child: Text("First Grid View"),
          ),
          SliverMasonryGrid.count(
              childCount: 4,
              crossAxisCount: 2,
              mainAxisSpacing: 8.0,
              crossAxisSpacing: 8.0,
              itemBuilder: (context, index) => Container(
                    height: heights[index],
                    color: Colors.yellow,
                    child: Text("Item $index of Grid 1"),
                  )),
          const SliverToBoxAdapter(
            child: Text("First Grid View"),
          ),
          SliverMasonryGrid.count(
              childCount: 30,
              crossAxisCount: 2,
              mainAxisSpacing: 8.0,
              crossAxisSpacing: 8.0,
              itemBuilder: (context, index) => Container(
                    height: heights[index],
                    color: Colors.blue,
                    child: Text("Item $index of Grid 2"),
                  )),
        ],
      ),
    );
  }
}

https://github.com/letsar/flutter_staggered_grid_view/assets/61370392/43973bb0-e863-4920-bc6b-7da7d14c3d6f

[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.

[zhaomein]

I have same issue.

[phucdth12a]

I am also getting same issue when using two SliverMasonaryGrid in a CustomScrollView. The scroll just shift to top gridview when the top grid view is not visible in viewport. It is like infinite scroll. Here's the code and output video:

import 'dart:math';
import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

class MyScrollingWidget extends StatelessWidget {
  const MyScrollingWidget({super.key});

  @override
  Widget build(BuildContext context) {
    final heights =
        List.generate(100, (index) => 50 + 10 * Random().nextInt(5).toDouble());
    return Scaffold(
      appBar: AppBar(
        title: const Text("Example"),
      ),
      body: CustomScrollView(
        physics: const AlwaysScrollableScrollPhysics(),
        slivers: [
          const SliverToBoxAdapter(
            child: Text("First Grid View"),
          ),
          SliverMasonryGrid.count(
              childCount: 4,
              crossAxisCount: 2,
              mainAxisSpacing: 8.0,
              crossAxisSpacing: 8.0,
              itemBuilder: (context, index) => Container(
                    height: heights[index],
                    color: Colors.yellow,
                    child: Text("Item $index of Grid 1"),
                  )),
          const SliverToBoxAdapter(
            child: Text("First Grid View"),
          ),
          SliverMasonryGrid.count(
              childCount: 30,
              crossAxisCount: 2,
              mainAxisSpacing: 8.0,
              crossAxisSpacing: 8.0,
              itemBuilder: (context, index) => Container(
                    height: heights[index],
                    color: Colors.blue,
                    child: Text("Item $index of Grid 2"),
                  )),
        ],
      ),
    );
  }
}

Screenrecording_20230520_170231.mp4

i have same issue. How to fix it. :(

[CrypticVader]

I ran into this issue a week ago. Do any of you think it has to do with this flutter bug? Apparently, when using multiple SliverGrids in flutter, the grid won't lay out any of its children if the grid is above the viewport. It sounds similar to the issue with SliverMasonryGrid.

[kidGuo]

Does anyone have a solution？

[phucdth12a]

Does anyone have a solution？

i don't know, but you can try library: https://pub.dev/packages/waterfall_flow

[CrypticVader]

Does anyone have a solution？

i don't know, but you can try library: https://pub.dev/packages/waterfall_flow

This works perfectly. Thank you