Flutter GridView Example

In this tutorial, you'll learn how to use the GridView widget in Flutter to create a grid of images with titles and descriptions. We'll start by defining a data class for the image data, then we'll create a stateless widget for the grid list demo. 

We'll use the ImageData class to define a list of image data, and then we'll build the widget tree with a Scaffold and a GridView.

 Finally, we'll map over the list of image data to create a grid of images with titles and descriptions.

Code:

// Import the material library
import 'package:flutter/material.dart';

// Define a stateless widget for the grid list demo
class GridListDemo extends StatelessWidget {
  const GridListDemo({Key? key}) : super(key: key);

  // Build method for the widget
  @override
  Widget build(BuildContext context) {

    // Define a list of image data using the ImageData class
    List<ImageData> imageDataList = [
      ImageData(
        imagePath: "assets/images/test.webp",
        name: "Image 1",
        description: "This is the first image.",
      ),
      ImageData(
        imagePath: "assets/images/test.webp",
        name: "Image 2",
        description: "This is the second image.",
      ),
      ImageData(
        imagePath: "assets/images/test.webp",
        name: "Image 4",
        description: "This is the first image.",
      ),
      ImageData(
        imagePath: "assets/images/test.webp",
        name: "Image 5",
        description: "This is the second image.",
      ),    ImageData(
        imagePath: "assets/images/test.webp",
        name: "Image 6",
        description: "This is the first image.",
      ),
      ImageData(
        imagePath: "assets/images/test.webp",
        name: "Image 7",
        description: "This is the second image.",
      ),
      ImageData(
        imagePath: "assets/images/test.webp",
        name: "Image 8",
        description: "This is the first image.",
      ),
      ImageData(
        imagePath: "assets/images/test.webp",
        name: "Image 9",
        description: "This is the second image.",
      ),
      ImageData(
        imagePath: "assets/images/test.webp",
        name: "Image 11",
        description: "This is the first image.",
      ),
      ImageData(
        imagePath: "assets/images/test.webp",
        name: "Image 11",
        description: "This is the second image.",
      ),
      ImageData(
        imagePath: "assets/images/test.webp",
        name: "Image 12",
        description: "This is the first image.",
      ),
      ImageData(
        imagePath: "assets/images/test.webp",
        name: "Image 13",
        description: "This is the second image.",
      ),

      // add more images here...
    ];

    // Build the widget tree with a Scaffold and a GridView
    return  Scaffold(
      body: GridView(
        padding: const EdgeInsets.all(16.0),
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          childAspectRatio: 0.8,
        ),
        children: imageDataList.map((imageData) {
          return Container(
            padding: const EdgeInsets.all(8.0),
            child: Column(
              children: [
                Image.asset(imageData.imagePath),
                const SizedBox(height: 8.0),
                Text(imageData.name),
                Text(imageData.description),
              ],
            ),
          );
        }).toList(),
      ),
    );
  }
}

// Define a data class for the image data
class ImageData {
  final String imagePath;
  final String name;
  final String description;

  // Constructor for the class
  ImageData({
    required this.imagePath,
    required this.name,
    required this.description,
  });
}

Step-by-Step Code Explanation:

• We start by importing the material library.
• We define a stateless widget for the grid list demo.
• We define a list of image data using the ImageData class.
• We build the widget tree with a Scaffold and a GridView.
• We map over the list of image data to create a grid of images with titles and descriptions.
• We define a data class for the image data.

..