GridView.builder in Flutter

Create Free Backend With Appwrite

Introduction

GridView.builder is an efficient way to create grid layouts that display a large number of items. It dynamically creates grid items as they become visible on the screen, making it ideal for grid layouts with numerous items.

Info

Note: Before learning GridView.builder, make sure you understand the basics of GridView.

Example 1: Basic GridView.builder

In this example below, you will learn how to create a basic grid layout using GridView.builder.

GridView.builder(
  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: 2), // Number of columns
  itemCount: 20,
  itemBuilder: (BuildContext context, int index) {
    return GridTile(
      child: Center(
        child: Text('Item $index'),
      ),
    );
  },
)
Run Online

In this example below, you will learn how to create a simple photo gallery app using GridView.builder.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  final List<String> imageUrls = [
    'https://picsum.photos/250?image=237',
    'https://picsum.photos/250?image=238',
    'https://picsum.photos/250?image=239',
    'https://picsum.photos/250?image=240',
    'https://picsum.photos/250?image=241',
    'https://picsum.photos/250?image=242',
    'https://picsum.photos/250?image=243',
    'https://picsum.photos/250?image=244',
    // Add more image URLs
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Photo Gallery')),
        body: GridView.builder(
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 3), // Number of columns
          itemCount: imageUrls.length,
          itemBuilder: (BuildContext context, int index) {
            return Image.network(imageUrls[index]);
          },
        ),
      ),
    );
  }
}
Run Online

Example 3: Create Tic-Tac-Toe Board

In this example below, you will learn how to create a Tic-Tac-Toe board using GridView.builder.

GridView.builder(
  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: 3), // Number of columns
  itemCount: 9,
  itemBuilder: (BuildContext context, int index) {
    return Container(
      decoration: BoxDecoration(
        border: Border.all(color: Colors.black),
      ),
      child: Center(
        child: index % 2 == 0
            ? const Text('X')
            : const Text('O'),
      ),
    );
  },
)
Run Online

Example 4: Product Catalog App Using Data Model

In this example below, you will learn how to create a product catalog app using a Data Model and GridView.builder.

Step 1: Define the Data Model

First, we define a simple data model for a product.

class Product {
  final String title;
  final String subtitle;
  final String imageUrl;

  Product({
    required this.title,
    required this.subtitle,
    required this.imageUrl,
  });
}
Step 2: Create a List of Products

Create a list of sample products.

List<Product> products = [
  Product(
    title: 'Product 1',
    subtitle: 'Subtitle 1',
    imageUrl: 'https://picsum.photos/250?image=237',
  ),
  Product(
    title: 'Product 2',
    subtitle: 'Subtitle 2',
    imageUrl: 'https://picsum.photos/250?image=238',
  ),
  Product(
    title: 'Product 3',
    subtitle: 'Subtitle 3',
    imageUrl: 'https://picsum.photos/250?image=239',
  ),
  // Add more sample products
];
Step 3: Build the GridView

Use GridView.builder to create the product grid.

GridView.builder(
  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: 2), // Number of columns
  itemCount: products.length,
  itemBuilder: (BuildContext context, int index) {
    return Card(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Image.network(products[index].imageUrl),
          Text(products[index].title),
          Text(products[index].subtitle),
        ],
      ),
    );
  },
)
Run Online

Challenge

Create chess board using GridView.builder. Make sure to use the following colors for the tiles:

- White: #F0D9B5
- Black: #B58863