Friday, March 29, 2024

How to use Gridview in Flutter

In this Section i am going to explain different way to use gridview controls in flutter.
The Gridview widget change our widgets in Scrollable grid format. We can use GridView in different ways based on our size of data to be processed.

There are mainly 3 constructors to use grid view controls.

1.GridView.count
2.GridView.extent
3.GridView.builder

The Gridview.count and Extent are usually used with small fixed size of data set .But user doesn’t see the gridview contents until its fully loaded. Can you imagine that if we need to process Large unknown size of data. Then the gridview.count and gridview.extent constructor are not suitable. Because this affected the user experience . This scenario is resolved by use of gridview.builder.

Usually you use the GridView.count when you need a layout with a fixed number of tiles in the crossaxis.
For example you need to show 4 tiles in both portrait and landscape mode then Gridview.count is the best option.

The GridView.extent when you need a layout with the tiles that need a maximum cross-axis extent.
For example You need to show 4 Tiles in portrait mode and 6 tiles in Landscape mode.
Or in other words it nicely fits as many tiles that can be depending on the screen size.

The GridView.builder constructr is used with large, infinite and unknown size of data.

1.GridView.count

The crossAxisCount and the children argument are common property for generate Gridview.count . The crossAxisCount set the number of tiles to display and children is a list of widgets.
The scrollDirection argument sets the main axis direction for the grid to scroll

In the Children argument you use List.generate to create our sample data set.

children: List.generate(50, (index) {
                return Card(
                  child: InkWell(
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Icon(
                          Icons.movie_outlined,
                          size: 48.0,
                          color: Colors.blue,
                        ),
                        Divider(),
                        Text('sampe $index',
                            textAlign: TextAlign.center,
                            style: TextStyle(
                              fontSize: 16.0,
                            ))
                      ],
                    ),
                  ),
                );
              })
              )

Demo

Please read following Tutorial to learn more about GridView.extent constructor.