GridView Widget

The GridView widget in Flutter is a scrolling container that displays a grid of widgets. It arranges its children in a two-dimensional grid and is useful when displaying items in a grid-like layout. The GridView widget is similar to the ListView widget, but it arranges its children in a grid pattern rather than a linear pattern.

The GridView widget has several constructors that allow you to customize its behavior. The most common constructor is the GridView.builder() constructor, which creates a grid with a variable number of children. It takes a builder function that returns a widget for each item in the grid. The builder function takes an index parameter that represents the index of the item being built.

Here’s an example of using the GridView.builder() constructor to display a grid of images:

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
    crossAxisSpacing: 10,
    mainAxisSpacing: 10,
  ),
  itemCount: images.length,
  itemBuilder: (BuildContext context, int index) {
    return Image.network(images[index]);
  },
)

In this example, we create a grid with two columns using the SliverGridDelegateWithFixedCrossAxisCount delegate. We also specify the spacing between the rows and columns. The itemCount property specifies the number of items in the grid, and the itemBuilder function returns an Image widget for each item in the grid, using the URL from the images list.

What is the gridDelegate property?

The gridDelegate property of the GridView widget is used to control the layout of the grid. It’s an abstract class that defines the layout algorithm used to position the children of the grid.

In Flutter, there are several built-in subclasses of SliverGridDelegate that can be used as grid delegates:

1. SliverGridDelegateWithFixedCrossAxisCount: This delegate creates a grid with a fixed number of columns. You can specify the number of columns using the crossAxisCount parameter.
2. SliverGridDelegateWithMaxCrossAxisExtent: This delegate creates a grid with a maximum column width. You can specify the maximum width using the maxCrossAxisExtent parameter.
3. SliverGridDelegateWithFixedCrossAxisExtent: This delegate creates a grid with fixed column width. You can specify the width using the crossAxisExtent parameter.

Each of these delegates has its own set of parameters that can be used to customize the grid layout. For example, crossAxisSpacing and mainAxisSpacing can be used to set the spacing between the columns and rows, respectively.

Examples

Here’s an example of using the SliverGridDelegateWithFixedCrossAxisCount delegate:

GridView(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 3,
    crossAxisSpacing: 10,
    mainAxisSpacing: 10,
  ),
  children: [
    // list of grid items
  ],
)

In this example, we create a grid with three columns using the SliverGridDelegateWithFixedCrossAxisCount delegate. We also specify the spacing between the columns and rows. The children property is used to specify the list of grid items to be displayed in the grid.

Here’s an example of using SliverGridDelegateWithMaxCrossAxisExtent in a GridView widget:

GridView.builder(
  gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
    maxCrossAxisExtent: 200,
    mainAxisSpacing: 10,
    crossAxisSpacing: 10,
    childAspectRatio: 3 / 2,
  ),
  itemCount: 6,
  itemBuilder: (BuildContext context, int index) {
    return Container(
      alignment: Alignment.center,
      child: Text(
        'Item $index',
        style: TextStyle(fontSize: 16),
      ),
      decoration: BoxDecoration(
        color: Colors.grey[200],
        border: Border.all(color: Colors.grey),
      ),
    );
  },
)

In this example, we are creating a GridView with 6 items. The gridDelegate property is set to SliverGridDelegateWithMaxCrossAxisExtent, which allows us to specify the maximum width of each item (in this case, 200). We are also setting the spacing between items on the main and cross axes, as well as the aspect ratio of each item.

The itemBuilder function is called for each item in the grid and returns a container with some text and a border to illustrate the layout. You can replace this with any widget you like, such as an Image widget with the flag of each city.

Here’s an example of using SliverGridDelegateWithFixedCrossAxisExtent to create a grid of images with a fixed width:

import 'package:flutter/material.dart';

class MyGrid extends StatelessWidget {
  final List<String> images = [    'https://via.placeholder.com/150x150',    'https://via.placeholder.com/150x150',    'https://via.placeholder.com/150x150',    'https://via.placeholder.com/150x150',    'https://via.placeholder.com/150x150',    'https://via.placeholder.com/150x150',    'https://via.placeholder.com/150x150',    'https://via.placeholder.com/150x150',    'https://via.placeholder.com/150x150',  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My Grid'),
      ),
      body: CustomScrollView(
        slivers: [
          SliverGrid(
            delegate: SliverChildBuilderDelegate(
              (BuildContext context, int index) {
                return Image.network(
                  images[index],
                  fit: BoxFit.cover,
                );
              },
              childCount: images.length,
            ),
            gridDelegate: SliverGridDelegateWithFixedCrossAxisExtent(
              crossAxisExtent: 150,
              mainAxisSpacing: 10,
              crossAxisSpacing: 10,
            ),
          ),
        ],
      ),
    );
  }
}

In this example, we have a list of image URLs in the images list. We create a CustomScrollView with a single SliverGrid child. The delegate property of SliverGrid is a SliverChildBuilderDelegate, which builds a list of child widgets based on the images list.

The gridDelegate property of SliverGrid is a SliverGridDelegateWithFixedCrossAxisExtent, which creates a grid with fixed-width cells. In this case, we set crossAxisExtent to 150, which means each cell will have a width of 150 pixels. We also set mainAxisSpacing and crossAxisSpacing to 10, which adds spacing between the cells.