flutter_staggered_grid_view
flutter_staggered_grid_view copied to clipboard
letsar
Allow to change crossAxisCount dynamically.
Hello Team, I'm working with provided StaggeredGridView widget and trying to switch in between 3 to 2 column grid view. Initially loaded data with the 3 column view but after on dynamic change state to 2 columns view it's changing view but showing just first 2 columns data from 3 column gridview. (Example: Suppose there are total 15 items in 3 column view then after switch in 2 column view it's just showing 10 items.)
Please check the code I've written as below: ``` Expanded( child: StaggeredGridView.countBuilder( crossAxisCount: ViewStateHelper.getColumnCount(_viewState), itemCount: _catalogItems.length, itemBuilder: (BuildContext context, int index) => CatalogItem(_catalogItems[index], _viewState), staggeredTileBuilder: (int index) => StaggeredTile.fit(1)));
enum ViewState { TWO_COLUMN_VIEW, THREE_COLUMN_VIEW }
class ViewStateHelper { static int getColumnCount(ViewState viewState) => viewState == ViewState.TWO_COLUMN_VIEW ? 2 : 3; }
Please suggest & provide the appropriate solution.
@letsar @dereklakin @brianegan Please help me to resolve this issue, thanks in advance.
I'm having the same problem. On resize the screen and swapping the crossAxisCount from 3 to 2 it will cut off items and just not showing them. On a full refresh of the page the items appear again in the correct way.
Is there a way to "rebuild" on resize?
Append the value of the crossAxisCount to the Key of the StaggeredGridView. When changes the existing widget will not be reused.
I followed @apps-transround suggestion and my issue is now fixed,
Code example:
StaggeredGridView.count(
primary: false,
key: ObjectKey(gridViewColumns),
addAutomaticKeepAlives: false,
crossAxisCount: gridViewColumns.toInt(),
padding: const EdgeInsets.all(1.0),
children: <Widget>[], // add here your items
staggeredTiles: snapshot.data
.map<StaggeredTile>((_) => StaggeredTile.fit(1))
.toList(),
mainAxisSpacing: 3.0,
crossAxisSpacing: 0.0, // add some space
),
Thanks for the suggestion. Here is a code example that works without any changes needed.
SliverStaggeredGrid.countBuilder(
itemCount: 200,
key: ObjectKey(columns),
crossAxisCount: columns,
mainAxisSpacing: 20,
crossAxisSpacing: 10,
itemBuilder: (BuildContext context, int index) {
return Container(
color: Colors.red,
height: 200,
);
},
staggeredTileBuilder: (int index) {
return StaggeredTile.fit(1);
},
),
I am renaming this issue to make the problem easier to understand.
Right now the only available option is to use a different key when the crossAxisCount changes. This makes the Flutter Framework think it is a different widget and builds it form scratch ignoring any previous state.
Can you test with the latest 0.5.0 preview? https://pub.dev/packages/flutter_staggered_grid_view/versions/0.5.0-dev.1
well if you are using staggered grid view for the infinite scrolling then it won't work.
