Flutter GridView (original) (raw)

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 children = const [],
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 children = const [],
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 children = const [],
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:

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 {

@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 :

Dart `

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() :

Dart `

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():

Dart `

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():

Dart `

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():

Dart `

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