Different ways to create a GridView in Flutter

Different ways to create a GridView in Flutter:

GridView is used to show data in grids or in a list of row and columns. It is a scrollable widget and we can define the scrolling direction. User can tap on any of the items and it can hold any other widget like text, image, button, video etc. It can hold a fixed number or an infinite number of items.

It is an important widget in mobile applications and most apps uses it.

Flutter provides different ways to create GridView easily. Following are the ways that we can use to create GridView :

GridView.count()
GridView.builder()
GridView.custom()
GridView.extent()

GridView.count:

GridView.count constructor is used to create a fixed number of items in a grid view. We can specify how many row or column

For example:

import 'package:flutter/material.dart';

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

const List<Color> colors = [
  Colors.black,
  Colors.green,
  Colors.red,
  Colors.yellow,
  Colors.amber,
  Colors.blueGrey,
  Colors.blue,
  Colors.blueAccent,
  Colors.pink,
  Colors.teal,
  Colors.purple,
  Colors.indigo
];

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: Scaffold(
            appBar: AppBar(
              title: Text('GridView Example'),
            ),
            body: GridView.count(
                scrollDirection: Axis.vertical,
                mainAxisSpacing: 10.0,
                crossAxisSpacing: 5.0,
                crossAxisCount: 3,
                reverse: false,
                children: List.generate(colors.length, (index) {
                  return Card(color: colors[index]);
                }))));
  }
}

Here,

scrollDirection is the scrollable direction of the GridView. By default, it is in vertical.
mainAxisSpacing is the space between each item in the main axis
crossAxisSpacing is the space between each item in the cross axis
crossAxisCount is the number of columns in the grid
reverse if it is true, it will reverse the direction of the grid view.
children is the list of children or widgets to show in the grid view

If you run the above program, it will give an output as like below:

GridView.Builder:

GridView.Builder is used for infinite list of data. For infinite data set, we can use GridView.Builder constructor with SliverGridDelegateWithFixedCrossAxisCount or a SliverGridDelegateWithMaxCrossAxisExtent as gridDelegate.

import 'package:flutter/material.dart';

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

const List<Color> colors = [
  Colors.black,
  Colors.green,
  Colors.red,
  Colors.yellow,
  Colors.amber,
  Colors.blueGrey,
  Colors.blue,
  Colors.blueAccent,
  Colors.pink,
  Colors.teal,
  Colors.purple,
  Colors.indigo
];

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: Scaffold(
            appBar: AppBar(
              title: Text('GridView Example'),
            ),
            body: GridView.builder(
              scrollDirection: Axis.vertical,
              itemCount: colors.length,
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 2,
                  crossAxisSpacing: 5.0,
                  mainAxisSpacing: 5.0),
              itemBuilder: (BuildContext context, int index) {
                return Card(color: colors[index]);
              },
            )));
  }
}

Here,

itemCount is the number of items to display
gridDelegate is used for adding spacings and other properties between the items.
itemBuilder is used to get the item for each index in the GridView.

It will give a result similar to above.

GridView.extent():

GridView.extend is used if we want to create a gridview layout with tiles that have a maximum cross-axis extent.

import 'package:flutter/material.dart';

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

const List<Color> colors = [
  Colors.black,
  Colors.green,
  Colors.red,
  Colors.yellow,
  Colors.amber,
  Colors.blueGrey,
  Colors.blue,
  Colors.blueAccent,
  Colors.pink,
  Colors.teal,
  Colors.purple,
  Colors.indigo
];

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: Scaffold(
            appBar: AppBar(
              title: Text('GridView Example'),
            ),
            body: GridView.extent(
              scrollDirection: Axis.vertical,
              maxCrossAxisExtent: 200,
              crossAxisSpacing: 5.0,
              mainAxisSpacing: 5.0,
              children: List.generate(colors.length, (index) {
                return Card(color: colors[index]);
              }),
            )));
  }
}

CodeVsColor

Different ways to create a GridView in Flutter