GridView.builder in Flutter - Mini App: Build & Ship

Build: Simple Grid Screen

This screen shows a grid of colored boxes with numbers. It uses GridView.builder to create the grid dynamically.

Target UI

Simple Grid Screen

+-----------------------+
|  [ 1 ]  [ 2 ]  [ 3 ] |
|  [ 4 ]  [ 5 ]  [ 6 ] |
|  [ 7 ]  [ 8 ]  [ 9 ] |
+-----------------------+

Use GridView.builder to create a grid with 9 items

Each grid item is a square container with a background color

Each container shows its index number centered

Grid has 3 columns

Add some spacing between grid items

Starter Code

Flutter

import 'package:flutter/material.dart';

class SimpleGridScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Simple Grid Screen')),
      body: // TODO: Add GridView.builder here
    );
  }
}

void main() {
  runApp(MaterialApp(home: SimpleGridScreen()));
}

Task 1

Task 2

Task 3

Task 4

Solution

Flutter

import 'package:flutter/material.dart';

class SimpleGridScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Simple Grid Screen')),
      body: GridView.builder(
        padding: const EdgeInsets.all(12),
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 3,
          crossAxisSpacing: 12,
          mainAxisSpacing: 12,
          childAspectRatio: 1,
        ),
        itemCount: 9,
        itemBuilder: (context, index) {
          return Container(
            decoration: BoxDecoration(
              color: Colors.blue[(index + 1) * 100],
              borderRadius: BorderRadius.circular(8),
            ),
            child: Center(
              child: Text(
                '${index + 1}',
                style: const TextStyle(
                  fontSize: 24,
                  color: Colors.white,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
          );
        },
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(home: SimpleGridScreen()));
}

We use GridView.builder to create a grid with 9 items dynamically. The gridDelegate sets 3 columns with spacing between items. Each item is a square container with a blue shade background and a white number centered. This approach is efficient for large or dynamic lists because it builds items on demand.

Final Result

Completed Screen

Simple Grid Screen

+-----------------------+
|  [ 1 ]  [ 2 ]  [ 3 ] |
|  [ 4 ]  [ 5 ]  [ 6 ] |
|  [ 7 ]  [ 8 ]  [ 9 ] |
+-----------------------+

User can scroll if the grid grows larger (not in this example)

Each box shows its number clearly in the center

Stretch Goal

Add tap interaction to each grid item that shows a SnackBar with the item number

💡 Hint

Wrap each Container with GestureDetector and use ScaffoldMessenger.of(context).showSnackBar() inside onTap