How to create GridView Layout in Flutter

In this article, we’ll explore the different ways to create a GridView layout in Flutter. A GridView is a widget that displays items in a grid format, making it perfect for applications where you need to display multiple items in a compact and organized manner.

GridView.count()

The `GridView.count()` constructor creates a GridView with a fixed number of columns and rows. The `crossAxisCount` property specifies the number of columns, while the `children` property takes a list of widgets to be displayed in each tile.

GridView.count(
  crossAxisCount: 2,
  children: [
    FlutterLogo(),
    FlutterLogo(),
    FlutterLogo(),
    FlutterLogo(),
  ],
)

GridView.builder()

The `GridView.builder()` constructor is similar to `GridView.count()`, but it uses a builder function to generate the tiles instead of specifying them explicitly. This makes it useful when you need to display a dynamic number of items.

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
  itemBuilder: (_, index) => FlutterLogo(),
  itemCount: 4,
)

GridView()

The `GridView()` constructor is similar to the other two, but it uses a `gridDelegate` property to specify the layout of the grid. In this case, we’re using a `SliverGridDelegateWithFixedCrossAxisCount` delegate with a fixed number of columns.

GridView(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
  children: [
    FlutterLogo(),
    FlutterLogo(),
    FlutterLogo(),
    FlutterLogo(),
  ],
)

GridView.custom()

The `GridView.custom()` constructor is similar to the other three, but it uses a custom grid delegate and child delegate to specify the layout of the grid.

GridView.custom(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
  childrenDelegate: SliverChildListDelegate(
    [
      FlutterLogo(),
      FlutterLogo(),
      FlutterLogo(),
      FlutterLogo(),
    ],
  ),
)

GridView.extent()

The `GridView.extent()` constructor creates a GridView with a variable number of columns based on the available space. The `maxCrossAxisExtent` property specifies the maximum width of each column.

GridView.extent(
  maxCrossAxisExtent: 400,
  children: [
    FlutterLogo(),
    FlutterLogo(),
    FlutterLogo(),
    FlutterLogo(),
  ],
)

Example Code

Here’s an example code snippet that uses the `GridView.count()` constructor to display a grid of images:

import 'package:flutter/material.dart';

void main() {
  runApp( MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(

      color: Colors.white30,
      child: GridView.count(
          crossAxisCount: 4,
          childAspectRatio: 1.0,
          padding: const EdgeInsets.all(4.0),
          mainAxisSpacing: 4.0,
          crossAxisSpacing: 4.0,
          children: [
            'http://www.for-example.org/img/main/forexamplelogo.png',
            'http://www.for-example.org/img/main/forexamplelogo.png',
            'http://www.for-example.org/img/main/forexamplelogo.png',
            'http://www.for-example.org/img/main/forexamplelogo.png',
            'http://www.for-example.org/img/main/forexamplelogo.png',
            'http://www.for-example.org/img/main/forexamplelogo.png',
            'http://www.for-example.org/img/main/forexamplelogo.png',
            'http://www.for-example.org/img/main/forexamplelogo.png',
            'http://www.for-example.org/img/main/forexamplelogo.png',
            'http://www.for-example.org/img/main/forexamplelogo.png',
            'http://www.for-example.org/img/main/forexamplelogo.png',
          ].map((String url) {
            return GridTile(
                child: Image.network(url, fit: BoxFit.cover));
          }).toList()),
    );
  }
}

This code snippet creates a grid with 4 columns and displays images from the specified URLs in each tile.