Grid Layout

In Flutter, the Grid Layout is used to display items in a grid structure. It allows arranging widgets in rows and columns efficiently. The main widgets for implementing grids include:

1. GridView

2. GridTile

3. SliverGrid

---

What are Grid Layout Widgets?

1. GridView:
   A scrollable widget that displays children in a grid format. It is the most commonly used grid widget.

2. GridTile:
   A widget that represents a single tile in a grid. It is used inside a GridView to create tiles with headers, footers, or child content.

3. SliverGrid:
   A part of CustomScrollView, it allows creating scrollable grids with advanced layouts using Sliver widgets.

---

Folder Structure

Below is the file structure for organizing the grid layout components:

Copylib/
└── features/
    └── flutter_components/
        └── layout/
            └── grid_layout/
                ├── components/
                │   ├── gridview_component.dart
                │   ├── gridtile_component.dart
                │   └── slivergrid_component.dart
                └── screen/
                    └── grid_layout_page.dart

---

Step 1: Create Components

1. GridView Component

The GridView widget creates a scrollable grid of children.

File: gridview_component.dart

Copyimport 'package:flutter/material.dart';

class GridViewComponent extends StatelessWidget {
  const GridViewComponent({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Text("GridView Example", style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
        const SizedBox(height: 8),
        SizedBox(
          height: 300,
          child: GridView.builder(
            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2, // 2 columns
              crossAxisSpacing: 10,
              mainAxisSpacing: 10,
            ),
            itemCount: 6, // Number of items
            itemBuilder: (context, index) {
              return Container(
                color: Colors.blueAccent,
                child: Center(
                  child: Text(
                    "Item $index",
                    style: const TextStyle(color: Colors.white, fontSize: 18),
                  ),
                ),
              );
            },
          ),
        ),
      ],
    );
  }
}

Output:

• A scrollable grid with 2 columns and 6 items.

---

2. GridTile Component

The GridTile widget creates grid tiles with a header, footer, and child content.

File: gridtile_component.dart

Copyimport 'package:flutter/material.dart';

class GridTileComponent extends StatelessWidget {
  const GridTileComponent({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Text("GridTile Example", style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
        const SizedBox(height: 8),
        SizedBox(
          height: 300,
          child: GridView.count(
            crossAxisCount: 2, // 2 columns
            crossAxisSpacing: 10,
            mainAxisSpacing: 10,
            children: List.generate(
              4,
              (index) => GridTile(
                header: const Text("Header", textAlign: TextAlign.center),
                footer: const Text("Footer", textAlign: TextAlign.center),
                child: Container(
                  color: Colors.orange,
                  child: Center(
                    child: Text(
                      "Tile $index",
                      style: const TextStyle(color: Colors.white, fontSize: 18),
                    ),
                  ),
                ),
              ),
            ),
          ),
        ),
      ],
    );
  }
}

Output:

• A grid with tiles containing a header, footer, and content.

---

3. SliverGrid Component

The SliverGrid widget creates grids inside a CustomScrollView for advanced scrolling behaviors.

File: slivergrid_component.dart

Copyimport 'package:flutter/material.dart';

class SliverGridComponent extends StatelessWidget {
  const SliverGridComponent({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: [
        const SliverAppBar(
          title: Text("SliverGrid Example"),
          expandedHeight: 100,
          floating: true,
        ),
        SliverGrid(
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3, // 3 columns
            mainAxisSpacing: 10,
            crossAxisSpacing: 10,
          ),
          delegate: SliverChildBuilderDelegate(
            (context, index) {
              return Container(
                color: Colors.green,
                child: Center(
                  child: Text(
                    "Item $index",
                    style: const TextStyle(color: Colors.white),
                  ),
                ),
              );
            },
            childCount: 9, // Number of items
          ),
        ),
      ],
    );
  }
}

Output:

• A scrollable grid inside a CustomScrollView with a SliverAppBar.

---

Step 2: Combine Components in a Single Screen

File: grid_layout_page.dart

Copyimport 'package:flutter/material.dart';
import '../components/gridview_component.dart';
import '../components/gridtile_component.dart';
import '../components/slivergrid_component.dart';

class GridLayoutPage extends StatelessWidget {
  const GridLayoutPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Grid Layout Widgets")),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: const [
            GridViewComponent(),
            SizedBox(height: 20),
            GridTileComponent(),
            SizedBox(height: 20),
            SizedBox(
              height: 500, // For CustomScrollView
              child: SliverGridComponent(),
            ),
          ],
        ),
      ),
    );
  }
}

---

---

• Use GridView for simple and scrollable grids.

• Use GridTile when you need headers, footers, or styled tiles.

• Use SliverGrid for more advanced grids inside a CustomScrollView.