Revision history [back]

1. First, import the necessary packages:

import 'package:flutter/material.dart';

1. Define a list of image URLs:

List<String> images = [
  'https://example.com/image1.jpg',
  'https://example.com/image2.jpg',
  'https://example.com/image3.jpg',
  'https://example.com/image4.jpg',
  'https://example.com/image5.jpg',
];

1. Create a GridView widget:

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

The GridView.builder widget creates a grid view with a fixed number of crossAxisCount columns. The itemCount property specifies the number of items in the grid view, which is the same as the length of the images list.

The gridDelegate property is used to configure the grid layout. In this example, we use the SliverGridDelegateWithFixedCrossAxisCount delegate, which creates a fixed number of columns based on the crossAxisCount parameter. We also specify the amount of spacing between the rows and columns using the crossAxisSpacing and mainAxisSpacing properties.

The itemBuilder function is called for each item in the list and returns a Widget. In this example, we use the Image.network widget to display each image. We also specify the fit property to control how the image fits inside the grid cell.