GridView.builder in Flutter

Introduction

GridView.builder helps you show many items in a neat grid that scrolls smoothly. It builds only what you see on screen to save memory.

Showing a photo gallery with many pictures.

Displaying products in a shopping app in rows and columns.

Making a grid of buttons or icons that users can tap.

Showing a list of cards or tiles that fit nicely in a grid.

Syntax

Flutter

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
  ),
  itemCount: 10,
  itemBuilder: (context, index) {
    return WidgetHere();
  },
)

gridDelegate controls how many columns or rows the grid has and spacing.

itemBuilder creates each grid item when needed, using the index.

Examples

A grid with 3 columns showing 6 text items labeled by their index.

Flutter

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 3,
  ),
  itemCount: 6,
  itemBuilder: (context, index) {
    return Text('Item $index');
  },
)

A grid where each item can be up to 150 pixels wide, showing 8 star icons.

Flutter

GridView.builder(
  gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
    maxCrossAxisExtent: 150,
  ),
  itemCount: 8,
  itemBuilder: (context, index) {
    return Icon(Icons.star);
  },
)

Sample App

This app shows a grid with 2 columns and 4 colored boxes labeled from Box 0 to Box 3. The boxes have spacing between them and padding around the grid.

Flutter

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('GridView.builder Example')),
        body: GridView.builder(
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
            mainAxisSpacing: 10,
            crossAxisSpacing: 10,
          ),
          itemCount: 4,
          itemBuilder: (context, index) {
            return Container(
              color: Colors.blue[100 * (index + 1)],
              child: Center(
                child: Text('Box $index', style: const TextStyle(fontSize: 20)),
              ),
            );
          },
          padding: const EdgeInsets.all(10),
        ),
      ),
    );
  }
}

Important Notes

Use itemCount to limit how many items show in the grid.

GridView.builder is efficient for large or infinite lists because it builds items only when needed.

Adjust crossAxisCount or maxCrossAxisExtent in gridDelegate to control grid layout.

Summary

GridView.builder creates scrollable grids efficiently by building items on demand.

Use gridDelegate to set grid columns and spacing.

itemBuilder builds each grid item using its index.