Scribd
Upload
10 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
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
10 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
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