Scribd
Upload
12 views

Lab 8

The document discusses three types of GridView widgets in Flutter: GridView.count, GridView.extent, and GridView.builder. GridView.count displays items in a grid with a fixed cross axis count. GridView.extent displays items within a maximum cross axis extent. GridView.builder allows building each item dynamically.

Uploaded by

Abdul Mateen Rajpoot
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
12 views

Lab 8

The document discusses three types of GridView widgets in Flutter: GridView.count, GridView.extent, and GridView.builder. GridView.count displays items in a grid with a fixed cross axis count. GridView.extent displays items within a maximum cross axis extent. GridView.builder allows building each item dynamically.

Uploaded by

Abdul Mateen Rajpoot
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

Types of GridView:

 GridView.count()
 GridView.extent()
 GridView.builder()

1) 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,),
],

),
);

}
}

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,),
],
),
);
}
}
2) GridView.extent()

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