Flutter Gridview Tutorial

Flutter GridView Widget Syntax & Example – How To Use GridView Widget

GridView is a widget that creates tiles in the cross axis.This creates the item tiles which are similar to Matrice.In android this widget it similar to recyclerview with a GridLayout as layout manager.In this tutorial we will learn 3 methods of creating a gridview.

GridView widget is a class in the material library of flutter SDK. It displays its children one after another in the scroll direction in the form of matrice.

Tutorial

Step 1:

Setup up a flutter project and open main.dart class and remove all generate code.In the home parameter pass in a class names HomeView.Now right-click and create a dart file named homeview.dart.

Step 2:

Open homeview.dart file and type stfull which auto-completes and generates a stateful widget.If you want you can build a stateless widget class if there is no element that is not updating. Name the class as HomeView.

Step 3:

Goto build method of HomeView and paste in below code.

import 'package:flutter/material.dart';

class HomeView extends StatefulWidget {
  @override
  _HomeViewState createState() => _HomeViewState();
}

class _HomeViewState extends State<HomeView> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Grid View"),),

      body: buildGridView(context),
    );
  }

  Widget buildGridView(BuildContext context) {
    return GridView.builder(
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 3,
        ),
        itemCount: 40,
        itemBuilder: (BuildContext context, int index) {
          return Card(
            color: Colors.grey,
            child: Center(child: Text('$index',style: TextStyle(color: Colors.white,fontSize: 30),)),
          );
        }
    );
  }
}

Gridview.Builder: It is a list-builder method.
padding: Padding you give to each item in the list.
itemCount: Total number of the item created to form a list.
item builder: This builder method invoked each time an item is to be created.

Alternate methods to build GridView

Method 1:

This method is used on when we have static data. Here list data will be predefined rather than dynamic.

Widget buildStaticListView(){
  return ListView(
    padding: const EdgeInsets.all(8),
    children: <Widget>[
      Container(
        height: 50,
        color: Colors.amber[600],
        child: const Center(child: Text('Entry A')),
      ),
      Container(
        height: 50,
        color: Colors.amber[500],
        child: const Center(child: Text('Entry B')),
      ),
      Container(
        height: 50,
        color: Colors.amber[100],
        child: const Center(child: Text('Entry C')),
      ),
    ],
  );
}

Method 2:

This method is used when we want to have a separator for each item in GridView.This is similar to GridView.Builder example earlier.

Widget buildGridViewUsingListGenerate(){
  return GridView.count(
    crossAxisCount: 2,
    children: List.generate(30, (index) {
      return Center(
        child: Text(
          'Item $index',
          style: Theme.of(context).textTheme.headline5,
        ),
      );
    }),
  );
}

Github Repo:

 https://github.com/imjeevandeshmukh/BytelogsTutorials/tree/main/Flutter/gridview_app