Scribd
Upload
8 views

Lab Manual GridView

The document discusses different types of GridView widgets in Flutter - GridView.count(), GridView.extent(), and GridView.builder(). It provides code examples and explanations of properties like crossAxisCount, mainAxisSpacing, crossAxisSpacing, itemBuilder, itemCount, and grid delegates.

Uploaded by

Abdul Mateen Rajpoot
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
8 views

Lab Manual GridView

The document discusses different types of GridView widgets in Flutter - GridView.count(), GridView.extent(), and GridView.builder(). It provides code examples and explanations of properties like crossAxisCount, mainAxisSpacing, crossAxisSpacing, itemBuilder, itemCount, and grid delegates.

Uploaded by

Abdul Mateen Rajpoot
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 8

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],);
}
)
);
}
}

You might also like