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 Class, Flutter 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!