Flutter - GridView

Flutter's GridView is a widget similar to a 2-D array found in many programming languages. As its name indicates, the GridView widget is used to display content in a grid format. This allows us to showcase images, text, icons, and more within the GridView. There are several ways to implement GridView in Flutter:

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

Constructor of GridView()

GridView GridView({
    Key? key,
    Axis scrollDirection = Axis.vertical,
    bool reverse = false,
    ScrollController? controller,
    bool? primary,
    ScrollPhysics? physics,
    bool shrinkWrap = false,
    EdgeInsetsGeometry? padding,
    required SliverGridDelegate gridDelegate,
    bool addAutomaticKeepAlives = true,
    bool addRepaintBoundaries = true,
    bool addSemanticIndexes = true,
    double? cacheExtent,
    List<Widget> children = const <Widget>[],
    int? semanticChildCount,
    DragStartBehavior dragStartBehavior = DragStartBehavior.start,
    Clip clipBehavior = Clip.hardEdge,
    ScrollViewKeyboardDismissBehavior keyboardDismissBehavior = ScrollViewKeyboardDismissBehavior.manual,
    String? restorationId,
    HitTestBehavior hitTestBehavior = HitTestBehavior.opaque,
})

Constructor of GridView.count()

GridView GridView.count({
    Key? key,
    Axis scrollDirection = Axis.vertical,
    bool reverse = false,
    ScrollController? controller,
    bool? primary,
    ScrollPhysics? physics,
    bool shrinkWrap = false,
    EdgeInsetsGeometry? padding,
    required int crossAxisCount,
    double mainAxisSpacing = 0.0,
    double crossAxisSpacing = 0.0,
    double childAspectRatio = 1.0,
    bool addAutomaticKeepAlives = true,
    bool addRepaintBoundaries = true,
    bool addSemanticIndexes = true,
    double? cacheExtent,
    List<Widget> children = const <Widget>[],
    int? semanticChildCount,
    DragStartBehavior dragStartBehavior = DragStartBehavior.start,
    ScrollViewKeyboardDismissBehavior keyboardDismissBehavior = ScrollViewKeyboardDismissBehavior.manual,
    String? restorationId,
    Clip clipBehavior = Clip.hardEdge,
    HitTestBehavior hitTestBehavior = HitTestBehavior.opaque,
})

Constructor of GridView.builder()

GridView GridView.builder({
    Key? key,
    Axis scrollDirection = Axis.vertical,
    bool reverse = false,
    ScrollController? controller,
    bool? primary,
    ScrollPhysics? physics,
    bool shrinkWrap = false,
    EdgeInsetsGeometry? padding,
    required SliverGridDelegate gridDelegate,
    required Widget? Function(BuildContext, int) itemBuilder,
    int? Function(Key)? findChildIndexCallback,
    int? itemCount,
    bool addAutomaticKeepAlives = true,
    bool addRepaintBoundaries = true,
    bool addSemanticIndexes = true,
    double? cacheExtent,
    int? semanticChildCount,
    DragStartBehavior dragStartBehavior = DragStartBehavior.start,
    ScrollViewKeyboardDismissBehavior keyboardDismissBehavior = ScrollViewKeyboardDismissBehavior.manual,
    String? restorationId,
    Clip clipBehavior = Clip.hardEdge,
    HitTestBehavior hitTestBehavior = HitTestBehavior.opaque,
})

Constructor of GridView.custom()

GridView GridView.custom({
    Key? key,
    Axis scrollDirection = Axis.vertical,
    bool reverse = false,
    ScrollController? controller,
    bool? primary,
    ScrollPhysics? physics,
    bool shrinkWrap = false,
    EdgeInsetsGeometry? padding,
    required SliverGridDelegate gridDelegate,
    required SliverChildDelegate childrenDelegate,
    double? cacheExtent,
    int? semanticChildCount,
    DragStartBehavior dragStartBehavior = DragStartBehavior.start,
    ScrollViewKeyboardDismissBehavior keyboardDismissBehavior = ScrollViewKeyboardDismissBehavior.manual,
    String? restorationId,
    Clip clipBehavior = Clip.hardEdge,
    HitTestBehavior hitTestBehavior = HitTestBehavior.opaque,
})

Constructor of GridView.extent()

GridView GridView.extent({
    Key? key,
    Axis scrollDirection = Axis.vertical,
    bool reverse = false,
    ScrollController? controller,
    bool? primary,
    ScrollPhysics? physics,
    bool shrinkWrap = false,
    EdgeInsetsGeometry? padding,
    required double maxCrossAxisExtent,
    double mainAxisSpacing = 0.0,
    double crossAxisSpacing = 0.0,
    double childAspectRatio = 1.0,
    bool addAutomaticKeepAlives = true,
    bool addRepaintBoundaries = true,
    bool addSemanticIndexes = true,
    double? cacheExtent,
    List<Widget> children = const <Widget>[],
    int? semanticChildCount,
    DragStartBehavior dragStartBehavior = DragStartBehavior.start,
    ScrollViewKeyboardDismissBehavior keyboardDismissBehavior = ScrollViewKeyboardDismissBehavior.manual,
    String? restorationId,
    Clip clipBehavior = Clip.hardEdge,
    HitTestBehavior hitTestBehavior = HitTestBehavior.opaque,
})

Demo Code

Implement the static code in main.dart and use the below GridView codes in the body of the scaffold to gain a better understanding of GridView.

main.dart:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'FAB',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          "ListView",
        ),
        backgroundColor: Colors.green,
        foregroundColor: Colors.white,
      ),
      body: // use the below GridView codes here to gain a better understanding of ListView.
    );
  }
}

GridView

This constructor enables the creation of a grid by manually providing a list of child elements. It requires a layout to determine how items are arranged.

Properties of GridView:

Code for GridView :

GridView(
    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: 2, // 2 columns
      crossAxisSpacing: 10,
      mainAxisSpacing: 10,
    ),
    children: List.generate(20, (index) {
      return Padding(
        padding: const EdgeInsets.all(8.0),
        child: Container(
          color: Colors.green.shade500,
          child: Center(
              child: Text('Item $index',
                  style: TextStyle(fontSize: 30, color: Colors.white))),
        ),
      );
    }),
  ),

Output:

GridView.count()

GridView.count() is one which is used frequently, the it is used when we already know the size of Grids. Whenever we have to implement GridView dynamically, we use GridView.builder(). Both are just like a normal array and dynamic array. In Flutter, the two GridView is mostly used.

GridView.count() is used with some named parameters. The properties that we can use with GridView.count() are: 

Properties of GridView:

Code for GridView.count() :

 GridView.count(
    crossAxisCount: 3, // 3 columns
    crossAxisSpacing: 8,
    mainAxisSpacing: 8,
    children: List.generate(40, (index) {
      return Padding(
        padding: const EdgeInsets.all(8.0),
        child: Container(color: Colors.green),
      );
    }),
  ),

Output:

GridView.builder()

GridView.builder() creates dynamic grids and loads items as needed, improving efficiency for large datasets. It is suitable for displaying data from APIs. ; presenting data.

Properties of GridView.builder():

Code for GridView.builder():

GridView.builder(
    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: 2,
      crossAxisSpacing: 10,
      mainAxisSpacing: 10,
    ),
    itemCount: 20,
    itemBuilder: (context, index) {
      return Padding(
        padding: const EdgeInsets.all(8.0),
        child: Container(
          color: Colors.green,
          child: Center(
            child: Text("Builder: $index",
            style: TextStyle(
              color: Colors.white,
              fontSize: 30
            ),
            ),
          ),
        ),
      );
    },
  ),

Output:

GridView.custom()

GridView.custom() provides advanced control over the grid structure, allowing for the creation of complex grid layouts tailored to specific needs.

Properties of GridView.custom():

Code for GridView.custom():

GridView.custom(
    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: 2,
    ),
    childrenDelegate: SliverChildBuilderDelegate(
      (context, index) => Padding(
        padding: const EdgeInsets.all(8.0),
        child: Container(
          color: Colors.green,
          child: Center(
            child: Text(
              "Custom: $index",
              style: TextStyle(color: Colors.white, fontSize: 30),
            ),
          ),
        ),
      ),
      childCount: 10,
    ),
  ),

Output:

GridView.extent()

GridView.extent() is similar to GridView.;,ount, it creates a grid where the width of each item is defined, enabling a more flexible and responsive grid layout.

Properties of GridView.extent()

Code for GridView.extent():

GridView.extent(
    maxCrossAxisExtent: 100,
    crossAxisSpacing: 10,
    mainAxisSpacing: 10,
    children: List.generate(50, (index) {
      return Padding(
        padding: const EdgeInsets.all(8.0),
        child: Container(
          color: Colors.green,
          child: Center(
            child: Text(
              "Extent: $index",
              style: TextStyle(color: Colors.white, fontSize: 10),
            ),
          ),
        ),
      );
    }),
  ),

Output