GridViews in Flutter

Hello everyone,

Flutter provides a wide range of widgets to create different type of UIs. and today we are going to see how we can build a GridView. In order to Build a gridview flutter provides us a widget a call GridView which is used to create a scrollable grid of widgets.

GridView Types in Flutter

Flutter provides three types of GridViews based on how the grid items are laid out:

1. GridView.count: This type of GridView creates a scrollable grid with a fixed number of items in each row or column. You can specify the number of cross-axis items (items in a row for vertical scrolling or in a column for horizontal scrolling) and customize their aspect ratio.
2. GridView.builder: This type of GridView creates a scrollable grid with a large number of items efficiently. It uses a builder function to create and populate grid items on-demand as the user scrolls, which makes it suitable for displaying large collections of data.
3. GridView.extent: This type of GridView creates a scrollable grid with items that have a fixed extent in the main axis (either width or height). You can specify the extent of the items and customize their aspect ratio.

Basics of GridView

The GridView widget takes a list of widgets as its children and displays them in a grid. The GridView widget has several properties that can be used to customize the appearance and behavior of the grid. Some of these properties are:

• scrollDirection - This property is used to set the direction of the scrolling. It can be set to Axis.vertical for a vertical grid and Axis.horizontal for a horizontal grid.
• gridDelegate - This property is used to set the layout of the grid. It takes a SliverGridDelegate object as its value. The SliverGridDelegate object specifies the number of columns and rows in the grid, the size of the grid cells, and the spacing between the cells.
• children - This property is used to set the list of widgets that will be displayed in the grid.

Implementing GridView in a Flutter app

In flutter we have 4 ways to implement GridView which are GridView.count , GridView.builder , GridView.custom and GrdiView.extent we will see how we can use each one of it to build the items in the grid

GridView.count :

using .count we can create a scrollable, 2D array of widgets with a fixed number of tiles in the cross axis. i.e., we need to generate the list of widget at once. below is the code to generate the Grid using .count constructor.

.count constructor of generating grid can be used if we have limited or less number of the items to be shown on the grid its highly suggested to use .builder constructor to build the grid for large number of items

crossAxisCount defines the no of columns we want to have in a grid.

GridView.count(
  crossAxisCount: 2,
  children: List.generate(10, (index) {
    return Container(
      color: Colors.blue,
      margin: const EdgeInsets.all(10),
      child: Center(
        child: Text(
          'Item $index',
          style: const TextStyle(
            color: Colors.white,
            fontSize: 20,
          ),
        ),
      ),
    );
  },
)

GridView.builder :

This constructor is appropriate for grid views with a large (or infinite) number of children because the builder is called only for those children that are actually visible.

Providing a non-null itemCount improves the ability of the GridView to estimate the maximum scroll extent. i.e., which building a list from internet lets suppose we have 20 items and we haven’t provided the itemCount then as we scroll down .builder will also try to build the 21st Items which will lead to the error. so it’s recommended to provide itemCount

itemBuilder is a required parameter of the .builder constructor will be called only with indices greater than or equal to zero and less than itemCount

gridDelegate property to configure the grid layout efficiently. Choose the appropriate gridDelegate based on your requirements, such as SliverGridDelegateWithFixedCrossAxisCount or SliverGridDelegateWithMaxCrossAxisExtent, and customize its properties to achieve the desired grid configuration.

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 3, // number of items in each row
    mainAxisSpacing: 8.0, // spacing between rows
    crossAxisSpacing: 8.0, // spacing between columns
  ),
  padding: EdgeInsets.all(8.0), // padding around the grid
  itemCount: items.length, // total number of items
  itemBuilder: (context, index) {
    return Container(
      color: Colors.blue, // color of grid items
      child: Center(
        child: Text(
          items[index],
          style: TextStyle(fontSize: 18.0, color: Colors.white),
        ),
      ),
    );
  },
)

GridView.extent :

GridView.extent is a type of GridView in Flutter that creates a scrollable grid with flexible item sizes. It uses the available space to determine the size of the items, allowing you to create grids where the items can have different sizes based on their content or aspect ratio. GridView.extent is particularly useful when you want to create responsive grids that adapt to different screen sizes or display items with varying sizes.

GridView.extent(
  maxCrossAxisExtent: 200.0, // maximum item width
  mainAxisSpacing: 8.0, // spacing between rows
  crossAxisSpacing: 8.0, // spacing between columns
  padding: EdgeInsets.all(8.0), // padding around the grid
  children: items.map((item) {
    return Container(
      color: Colors.blue, // color of grid items
      child: Center(
        child: Text(
          item,
          style: TextStyle(fontSize: 18.0, color: Colors.white),
        ),
      ),
    );
  }).toList(),
)

GridView.extent has the ability to create responsive grids with flexible item sizes. By specifying the maxCrossAxisExtent property, you can control the maximum width of the items in the grid, and the items will adjust their sizes based on the available space. This allows you to create grids that adapt to different screen sizes or display items with varying sizes, such as images with different aspect ratios or text with varying content lengths.

Conclusion:

Gridview is an adaptable widget that provides different types such as GridView.builder and GridView.extent, to create grid layouts in your applications. each has its specific use cases. GridView.builder is suitable for large datasets or dynamic content where you can build items on demand, while GridView.extent is useful for creating grids with flexible item sizes that adapt to different screen sizes or display items with varying content sizes or aspect ratios.

With GridView.builder, you can efficiently build grids with a large number of items, as it only creates and renders the items that are currently visible on the screen, improving performance and reducing memory usage. It also allows you to customize the grid layout and item creation process, giving you full control over the appearance and functionality of the grid.

On the other hand, GridView.extent is ideal for creating responsive grids with flexible item sizes that adjust based on the available space. By specifying the maxCrossAxisExtent property, you can control the maximum width of the items, and the items will adjust their sizes accordingly. This makes GridView.extent suitable for displaying items with varying aspect ratios or content sizes, making it visually appealing and responsive to different screen sizes or content lengths.

Thanks for your time.

Hope you like it, if yes clap & share.