Table of contents
1.
Introduction
2.
Constructor of GridView:
3.
Constructor of GridView.count()
4.
Constructor of GridView.builder()
5.
Constructor of GridView.custom()
6.
Constructor of GridView.extent()
7.
Properties of Alter Dialog Box
8.
Frequently Asked Questions
8.1.
How do you add a GridView in Flutter?
8.2.
What is GridView builder in Flutter?
8.3.
What is grid delegate in Flutter?
8.4.
What is Flutter and why it is used?
8.5.
Is Flutter a programming language?.
9.
Conclusion
Last Updated: Mar 27, 2024
Easy

Flutter GridView

Author Alok Pandey
0 upvote
Career growth poll
Do you think IIT Guwahati certified course can help you in your career?

Introduction

A grid view is a graphical control element that displays tabular data in a grid format. We'll learn how to render items in a grid view in the Flutter application in this article.
GridView is a Flutter widget that displays objects in a two-dimensional array (two-dimensional rows and columns). It will be used to display objects in a Grid, as the name implies. By touching on the desired item in the grid list, we can pick it. This widget can contain text, images, icons, and other content that will be shown in a grid arrangement according to the user's needs. A scrollable 2-D array of widgets is another name for it. We may specify the direction because it is scrollable.

In Flutter, we can use GridView in a variety of ways:

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

Constructor of 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}
)

Constructor of GridView.count()

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}
)

Constructor of GridView.builder()

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 IndexedWidgetBuilder itemBuilder,
ChildIndexGetter? 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}
)

Constructor of GridView.custom()

const 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}
)

Constructor of GridView.extent()

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}
)

Properties of Alter Dialog Box

  • anchor → double
    This attribute uses the zero scroll offset's relative location.
  • clipBehavior → Clip
    It takes Clip enum as the object to decide whether the content in the GridView will be clipped or not.
  • cacheExtent → double?
    This property deals with the items about to become visible when the user scrolls are cached in the viewport's area before and after the visible area.
  • childrenDelegate → SliverChildDelegate
    This property provides a delegate to serve GridView's children.
  • gridDelegate → SliverGridDelegate
    This property is used as a delegate that controls the layout of the children within the GridView.
  • controller → ScrollController?
    This property is used to control the position to which this scroll view is scrolled. 
  • key → Key?
    This property controls how one widget replaces another widget in the tree.
  • dragStartBehavior → DragStartBehavior
    This property determines the way that drag start behavior is handled
  • hashCode → int
    A hash code is a single integer that describes the state of an object and is used in comparisons with the operator ==.
  • keyboardDismissBehavior → ScrollViewKeyboardDismissBehavior
    ScrollViewKeyboardDismissBehavior defines how this ScrollView will dismiss the keyboard automatically.

 

Code:

import 'package:flutter/material.dart';
void main() {
  runApp(GeeksForGeeks());
}
class GeeksForGeeks extends StatelessWidget {
  // This widget is the root of your application
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.black,
          appBar: AppBar(
            backgroundColor: Colors.blueGrey[900],
            title: Center(
              child: Text(
                'Flutter GridView Demo',
                style: TextStyle(
                  color: Colors.blueAccent,
                  fontWeight: FontWeight.bold,
                  fontSize: 30.0,
                ),
              ),
            ),
          ),
          body: GridView.count(
            crossAxisCount: 2,
            crossAxisSpacing: 10.0,
            mainAxisSpacing: 10.0,
            shrinkWrap: true,
            children: List.generate(20, (index) {
              return Padding(
                padding: const EdgeInsets.all(10.0),
                child: Container(
                  decoration: BoxDecoration(
                    image: DecorationImage(
                    image: NetworkImage({Paste image link here}),
                    fit: BoxFit.cover,
                  ),
                borderRadius:
                BorderRadius.all(Radius.circular(20.0),),
                ),
              ),
            );
         },),
       ),
     ),
    );
  }
}

 

OUTPUT

 

Frequently Asked Questions

How do you add a GridView in Flutter?

In flutter, we can create a grid view by invoking the constructor of the GridView class and passing it the needed attributes. GridDelegate is the only property that is necessary. It manages the layout of the grid view's child widgets.

What is GridView builder in Flutter?

A GridView builder in Flutter creates a View of Grids.GridView is a widget or controller that manipulates elements to display data in a tabular format. The elements are displayed in a two-dimensional array in GridView. This refers to the rows and columns of a table.

What is grid delegate in Flutter?

A delegate that manages the layout of the GridView's descendants. This delegate can be specified manually using the GridView, GridView. builder, and GridView. custom constructors. The gridDelegate is created implicitly by the other constructors.

What is Flutter and why it is used?

Flutter is a portable UI toolkit from Google that lets you create attractive natively built apps for mobile, web, and desktop from a single codebase. Flutter is free and open-source, and it works with existing code. It is utilized by developers and organizations all over the world.

Is Flutter a programming language?.

Flutter, on the other hand, is not a programming language. It's a prewritten software development kit (SDK) that includes ready-to-use and customizable widgets, as well as libraries, tools, and documentation, all of which help developers create cross-platform apps.

Conclusion

In this article, we have extensively discussed Flutter GridView

We hope that this blog has helped you enhance your knowledge regarding Flutter GridView and if you would like to learn more, check out our articles on  

Flutter MaterialApp ClassFlutter Animation Flutter Table, and Flutter Tabbar

Refer to our guided paths on Coding Ninjas Studio to learn more about DSA, Competitive Programming, JavaScript, System Design, etc. 

Enroll in our courses and refer to the mock test and problems available.

Take a look at the interview experiences and interview bundle for placement preparations.

Do upvote our blog to help other ninjas grow. 

Happy Coding!

Live masterclass