Lab Manual
(Grid View)
Elements (Widgets) in Tabular Format
Automatically Scrollable
Note: We can design the mentioned design by using Rows & Columns but it is easy and
professional way to design using GridView.
Example:
Types of GridView:
GridView.count()
GridView.extent()
GridView.builder()
1) GridView.count()
CrossAxisCount is mandatory in GridView.count() (which means that
max number of items in one row)
Children are also part of GridView.count()
Code:
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Scaffold(
body:
GridView.count(crossAxisCount: 3,
children: [
Container(color:
Colors.amberAccent,),
Container(color:
Colors.black12,),
Container(color:
Colors.blue,),
Container(color:
Colors.orange,),
],
),
);
}
}
mainAxisSpacing ( spacing between row )
crossAxisSpacing ( spacing between column)
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor:
Colors.deepPurple),
useMaterial3: true,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Scaffold(
body: GridView.count(
crossAxisCount: 3,
mainAxisSpacing: 20,
crossAxisSpacing: 20,
children: [
Container(color: Colors.amberAccent,),
Container(color: Colors.black12,),
Container(color: Colors.blue,),
Container(color: Colors.orange,),
],
),
);
}
}
reverse (is used to change the direction from top to
bottom)
Implement it !
2) GridView.extent()
We does not specify any count for a row,
Grid is form according to the size of the item
In this we define maxCrossAxisExtent which is width of
each item
mainAxisSpacing & CrossAxisSpacing are Same as above
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Scaffold(
body: GridView.extent(
mainAxisSpacing: 20,
crossAxisSpacing: 20,
maxCrossAxisExtent: 200,
children: [
Container(color: Colors.amberAccent,),
Container(color: Colors.black12,),
Container(color: Colors.blue,),
Container(color: Colors.orange,),
],
)
);
}
}
3) GridView.builder()
Creating Dynamic Grid pattern (count not defined)
Example: A catalog in e commerce app
gridDelegate , itemBuilder , itemCount is mandatory
gridDelegate:
it is used to define the nature of the GridView..
Like ? is the grid is based on the size, or grid is based on the
total number of elements in one row etc
itemBuilder:
it uses (context,index) so that the index will use to
traverse each data from database and context is the current
state of the application.
itemCount:
it is used to define how many times the widgets(item)
will generate itself.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget{
List color =
[Colors.orange,Colors.blue,Colors.black12,Colors.amberAccent,Colors.orange,Colors.b
lue,Colors.black12,Colors.amberAccent,];
@override
Widget build(BuildContext context) {
return Scaffold(
body: GridView.builder(
itemCount: color.length,
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3 ,crossAxisSpacing:
10,mainAxisSpacing: 10),
itemBuilder: (context, index) {
return Container(color: color[index],);
}
)
);
}
}
In the above Code we use GridView.builder() method..
For the ease I created an array of colors and in the item count I
have passed color.length so that builder method determines
how many times it will run,
In gridDelegate we use Property
SliverGridDelegateWithFixedCrossAxisCount which have
crossAxisCount property in it… and as you know
crossAxisCount is used to define how many items are placed in
one row..
Note That: In SliverGridDelegateWithFixedCrossAxisCount also have a
crossAxisSpacing & mainAxisSpacing
Explore:
SliverGridDelegateWithMaxCrossAxisExtent
Is used to define the size of each item,
We provide maxCrossAxisExtent which tells builder to make
the item of that size.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget{
List color =
[Colors.orange,Colors.blue,Colors.black12,Colors.amberAccent,Colors.orange,Colors.b
lue,Colors.black12,Colors.amberAccent,];
@override
Widget build(BuildContext context) {
return Scaffold(
body: GridView.builder(
itemCount: color.length,
gridDelegate:
SliverGridDelegateWithMaxCrossAxisExtent(maxCrossAxisExtent: 100,crossAxisSpacing:
10,mainAxisSpacing: 10),
itemBuilder: (context, index) {
return Container(color: color[index],);
}
)
);
}
}
