How to use GridView in Flutter

Flutter comprises many built-in widgets that allow us to develop user-interactive applications that are powerful and efficient. You can choose from a large collection of appealing widgets and use them according to your application's format. One of these widgets is the GridView widget.

What is the GridView widget?

GridView is a widget in Flutter that arranges the list of its children in a two-dimensional grid pattern. It allows us to store and display our items in a matrix form.

This widget is highly useful when you want to display a set of widgets in a grid format. These widgets can be images, cards, icons, or any others.

Moreover, it automatically handles scrolling when there are more items that can practically fit on the device's screen. This saves the developer from the hassle of taking care of the scrolling methods.

Grid format
Grid format

Types of GridView

There are two main types of GridView that are used often.

  1. GridView.count

  2. GridView.builder

GridView.count()

GridView.count is a built-in constructor of the GridView widget that creates a grid with a fixed number of columns. However, the number of columns can be specified by you according to your application's inventory.

GridView.count(
  crossAxisCount: 3, // Adjust the number of columns here
  children: _generateGridItems(), // A function that returns a list of widgets
),
usin GridView.count method

This constructor is useful when you have a small number of items that are not dynamic and are not planned to change.

GridView.builder()

This constructor is more dynamic and provides more suitability when you have a large number of items in the grid or when the children widgets are built dynamically during runtime.

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 3, // Number of columns in the grid
    crossAxisSpacing: 8.0, // Spacing between columns
    mainAxisSpacing: 8.0, // Spacing between rows
    ),
  itemCount: itemCount,
  itemBuilder: (BuildContext context, int index) {
  return Container(
      color: Colors.white,
      child: Center(
           child: Text(
              'Item $index',
               style: TextStyle(color: Colors.white),
              ),
          ),
       );
    },
 ),
using GridView.builder method

Both these types can be used interchangeably with the GridView widget and can perform the same functionality more or less. However, GridView.builder is usually preferred as it's a more efficient and feasible way of displaying a large number of dynamic items on your screen.

Incorporating GridView into your Flutter app

First off, start by importing the necessary library for using the GridView widget. You can do that in the following manner:

import 'package:flutter/material.dart';
importing material package

The GridView widget has a simple structure with a number of attributes which are:

  • gridDelegate: The delegate used for specifying the attributes and layout of the grid.

  • children: List of widgets comprising the items to populate the grid.

import 'dart:math';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Simple GridView App',
      home: SimpleGridViewApp(),
    );
  }
}

class SimpleGridViewApp extends StatelessWidget {
  // Number of grid items to display
  final int itemCount = 50;

  // Function to generate random colors
  Color _generateRandomColor() {
    return Color(Random().nextInt(0xFFFFFFFF));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Simple GridView App'),
      ),
      body: GridView(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 3, // Number of columns in the grid
          crossAxisSpacing: 8.0, // Spacing between columns
          mainAxisSpacing: 8.0, // Spacing between rows
        ),
        children: List.generate(itemCount, (index) {
          return Container(
            color: _generateRandomColor(),
            child: Center(
              child: Text(
                'Item $index',
                style: TextStyle(color: Colors.black, fontSize: 24, fontWeight: FontWeight.bold),
              ),
            ),
          );
        }),
      ),
    );
  }
}
Using GridView widget

Code explanation

SimpleGridViewApp is another stateless widget representing the main content of the app. Inside this widget, we use the Scaffold widget to provide a basic app layout, including an AppBar and the GridView.

  • Lines 18–25: We define a variable itemCount that stores the number of items in our grid. Then we define a function _generateRandomColor that returns random colors to paint our grid elements.

  • Lines 34–38: We define a delegate for the GridView widget, and inside the delegate, we define the following properties:

    • crossAxisCount: 3 Defines the number of columns in the grid.

    • crossAxisSpacing: 8.0 Defines the spacing between columns.

    • mainAxisSpacing: 8.0 Defines the spacing between rows.

  • Lines 39–49: We generate a list of containers that enclose a Text widget inside them that specifies the item number. This list can contain any widgets that may be customized or built-in.

Free Resources

Copyright ©2026 Educative, Inc. All rights reserved