Flutter GridView

Creating grid layouts in Flutter

🎯 What is GridView?

GridView displays items in a two-dimensional scrollable grid layout. It's ideal for photo galleries, product catalogs, or any content that looks better in rows and columns. 


// Simple GridView example
GridView.count(
  crossAxisCount: 2,
  children: [
    Container(color: Colors.red),
    Container(color: Colors.blue),
  ],
)

Types of GridView

🔢

GridView.count

Fixed number of columns 

GridView.count(
  crossAxisCount: 3,
  children: [
    Text('Item 1'),
    Text('Item 2'),
  ],
)
📏

GridView.extent

Maximum tile width 

GridView.extent(
  maxCrossAxisExtent: 200,
  children: [
    Text('Item 1'),
    Text('Item 2'),
  ],
)
🔨

GridView.builder

Efficient for large grids 

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

GridView.custom

Custom grid behavior 

GridView.custom(
  gridDelegate: 
    SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: 2,
    ),
  childrenDelegate: 
    SliverChildBuilderDelegate(
      (context, index) {
        return Text('Item $index');
      },
    ),
)

🔹 Basic GridView.count Example

Create a simple grid with a fixed number of columns: 

import 'package:flutter/material.dart';

class MyGridView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Photo Grid')),
      body: GridView.count(
        crossAxisCount: 2,
        crossAxisSpacing: 10,
        mainAxisSpacing: 10,
        padding: EdgeInsets.all(10),
        children: [
          Container(
            color: Colors.red,
            child: Center(child: Text('Photo 1', style: TextStyle(color: Colors.white))),
          ),
          Container(
            color: Colors.blue,
            child: Center(child: Text('Photo 2', style: TextStyle(color: Colors.white))),
          ),
          Container(
            color: Colors.green,
            child: Center(child: Text('Photo 3', style: TextStyle(color: Colors.white))),
          ),
          Container(
            color: Colors.orange,
            child: Center(child: Text('Photo 4', style: TextStyle(color: Colors.white))),
          ),
        ],
      ),
    );
  }
}

Output:

Photo 1
Photo 2
Photo 3
Photo 4

🔹 GridView.builder for Dynamic Grids

Use GridView.builder for efficient rendering of large grids: 

class DynamicGridView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 3,
        crossAxisSpacing: 8,
        mainAxisSpacing: 8,
        childAspectRatio: 1,
      ),
      itemCount: 20,
      padding: EdgeInsets.all(8),
      itemBuilder: (context, index) {
        return Card(
          elevation: 4,
          child: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Icon(Icons.image, size: 40, color: Colors.blue),
                SizedBox(height: 8),
                Text('Item ${index + 1}'),
              ],
            ),
          ),
        );
      },
    );
  }
}

Output:

🖼️
Item 1
🖼️
Item 2
🖼️
Item 3
🖼️
Item 4
🖼️
Item 5
🖼️
Item 6

🔹 GridView.extent Example

Create a responsive grid with maximum tile width: 

GridView.extent(
  maxCrossAxisExtent: 150,
  crossAxisSpacing: 10,
  mainAxisSpacing: 10,
  padding: EdgeInsets.all(10),
  children: List.generate(12, (index) {
    return Container(
      decoration: BoxDecoration(
        color: Colors.primaries[index % Colors.primaries.length],
        borderRadius: BorderRadius.circular(8),
      ),
      child: Center(
        child: Text(
          '${index + 1}',
          style: TextStyle(color: Colors.white, fontSize: 24),
        ),
      ),
    );
  }),
)

Output:

1
2
3
4
5
6

🔹 GridView Best Practices

Tips for using GridView:

  • Use GridView.builder for large or dynamic grids
  • Set childAspectRatio to control item dimensions
  • Use GridView.extent for responsive layouts
  • Add spacing with crossAxisSpacing and mainAxisSpacing
  • Consider performance when displaying images

🧠 Test Your Knowledge

Which property controls the number of columns in GridView.count?