I want to create a similar view with Flutter as we can do it by creating a UICollectionViewLayout
in iOS .
This is a sample code I am using. https://github.com/flutter/flutter/blob/b8a2456737c9645e5f3d7210fba6267f7408486f/dev/integration_tests/flutter_gallery/lib/demo/material/grid_list_demo.dart
How to achieve this using GridView
in Flutter. If not GridView
, is there any other way to do it?
Flutter – Build Items of GridView Dynamically To generate items in a GridView programmatically, use GridView. builder() constructor to create GridView. This constructor allows us to specify an item builder function, via itemBuilder property, with the context and index of item as parameters.
Staggered GridView In Flutter. A grid view is a graphical control component used to show things in the tabular structure. GridView is a widget in Flutter that shows the things in a 2-D array (two-dimensional rows and columns). As the name proposes, it will be utilized when we need to show things in a Grid.
StaggeredGridView. count( crossAxisCount: 2, crossAxisSpacing: 20, mainAxisSpacing: 20, padding: EdgeInsets. symmetric(horizontal: 20.0, vertical: 20), //shrinkWrap: true, children: <Widget>[ _buildTile( Padding( padding: const EdgeInsets. all(20.0), child: Column(children: <Widget>[ Material( color: Color.
GridView is not designed to do this. You may be able to get a Wrap to do what you want, although from your example it may not quite do it (horizontally it definitely wont as it arrange the items into rows; vertically it might work for you or might not depending on exactly what you're doing).
If you're only ever going to have the two columns, you could simply have a Row containing two Columns and make sure to put the items in the right columns.
Or the more complicated but probably best answer would be to write the logic for arranging the items this way yourself - see CustomMultiChildLayout.
EDIT: there is also a package that may work for you. It can't do arbitrary sizing, and you need to know the sizes of the items in advance, but you can specify items to take up multiple rows or columns of the grid. See it here.
Note that if you have a lot of items, you'll probably want to do something with a CustomScrollView but that isn't really in the scope of this answer.
https://github.com/letsar/flutter_staggered_grid_view This would help you. I think the plugin gives different size.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With