top of page

GridView Class Tutorial

Updated: Nov 27, 2022

GridView is a 2-d scrollable list of widgets. We can display items in the form of a grid. The grid can have any number of columns and rows.

Create a GridView

To create a simple GridView in Flutter, we will use the following syntax:-

GridView(
  gridDelegate: grid_delegate,
  children: [],
),

The gridDelegate field asks for a delegate to control the view within the GridView. Suppose we want to have 3 columns or 2 columns, depending on the delegate, the GridView will show the respective number of columns.



Here is an example where we are creating a GridView with a total of 8 container widgets with different colours. The number of columns will be 2, so we will pass a grid delegate with a fixed cross-axis count of value equals 2.

Import the math class to generate the random colour.
GridView(
  gridDelegate:
      const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
  children: [
    for (var i = 0; i < 8; i++)
      Container(
        width: MediaQuery.of(context).size.width / 2.3,
        height: MediaQuery.of(context).size.width / 2.3,
        color: Color((Random().nextDouble() * 0xFFFFFF).toInt())
            .withOpacity(1.0),
        child: Text((i + 1).toString()),
      )
  ],
),



GridView.count is another type of GridView where we don't need to pass the delegate. Here is a similar example but without a grid delegate. Instead, it directly asks for the number of columns as crossAxisCount.

GridView.count(
  crossAxisCount: 3,
  children: [
    for (var i = 0; i < 18; i++)
      Container(
        width: MediaQuery.of(context).size.width / 2.3,
        height: MediaQuery.of(context).size.width / 2.3,
        color: Color((Random().nextDouble() * 0xFFFFFF).toInt())
            .withOpacity(1.0),
        child: Center(
            child: Text(
          (i + 1).toString(),
          style: const TextStyle(
            fontSize: 32.0,
            fontWeight: FontWeight.w600,
          ),
        )),
      )
  ],
),

Output




Related Posts

See All

The image sharing apps, shopping apps, etc. have image zoom functionality required to see the image in detail. Today, we will learn to implement the same with the help of a widget, InteractiveViewer.

bottom of page