GridView Widget

What is GridView Widget?

A scrollable, 2D array of widgets.

The main axis direction of a grid is the direction in which it scrolls (the scrollDirection).

The most commonly used grid layouts are GridView.count, which creates a layout with a fixed number of tiles in the cross axis.

Default Constructor

The named constructor creates a scrollable, 2D array of widgets with a fixed number of tiles in the cross axis.

GridView.count(
    primary: //
    padding: //
    crossAxisSpacing: //
    mainAxisSpacing: //
    crossAxisCount: //,
    children: //
)

Constructor Parameters

It contains many input parameters which can be configured to change its behavior and appearance.

The primary parameter is whether this is the primary scroll view associated with the parent.

The padding parameter is the amount of space by which to inset the children.

The mainAxisSpacing parameter is the number of logical pixels between each child along the main axis.

The mainAxisSpacing parameter is the number of logical pixels between each child along the cross axis.

The crossAxisCount parameter is the number of children in the cross axis.

Code snippet

Demo Code

This example demonstrates how to create a GridView with two columns. The children are spaced apart using the crossAxisSpacing and mainAxisSpacing properties.

The GridView displays six children with different background colors arranged in two columns.

import 'package:flutter/material.dart';

class GridViewDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GridView.count(
      primary: false,
      padding: const EdgeInsets.all(20),
      crossAxisSpacing: 10,
      mainAxisSpacing: 10,
      crossAxisCount: 2,
      children: <Widget>[
        Container(
          padding: const EdgeInsets.all(8),
          child: const Text('He\'d have you all unravel at the'),
          color: Colors.teal[100],
        ),
        Container(
          padding: const EdgeInsets.all(8),
          child: const Text('Heed not the rabble'),
          color: Colors.teal[200],
        ),
        Container(
          padding: const EdgeInsets.all(8),
          child: const Text('Sound of screams but the'),
          color: Colors.teal[300],
        ),
        Container(
          padding: const EdgeInsets.all(8),
          child: const Text('Who scream'),
          color: Colors.teal[400],
        ),
        Container(
          padding: const EdgeInsets.all(8),
          child: const Text('Revolution is coming...'),
          color: Colors.teal[500],
        ),
        Container(
          padding: const EdgeInsets.all(8),
          child: const Text('Revolution, they...'),
          color: Colors.teal[600],
        ),
      ],
    );
  }
}

// This Widget is the main application widget.
class MyApp extends StatelessWidget {
  static const String _title = 'GridView';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: Center(
          child: Material(child: GridViewDemo()),
        ),
      ),
    );
  }
}

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