flutter_staggered_grid_view
flutter_staggered_grid_view copied to clipboard
letsar
Scrolling is interrupted when using multiple SliverMasonryGrid
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.
ran into same issue. Would appreciate some solution.
For me it happens only when crossAxisCount is > 1 and im using SliverMasonryGrid.count
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
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.
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. :(
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.
Does anyone have a solution？
i don't know, but you can try library: https://pub.dev/packages/waterfall_flow
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