GridView
A scrollable, 2D array of widgets. We can display images, text, icons, etc on GridView.
Properties
- GridView.count()
- GridView.builder()
- GridView.custom ()
- GridView.extent()
Example 1:
import 'package:flutter/material.dart';
void main() => runApp(DemoApp());
class DemoApp extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return DemoAppState();
}
}
class DemoAppState extends State<DemoApp> {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(),
body: Center(
child: GridView(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
),
children: [
Image.network(
"https://cdn.pixabay.com/photo/2022/10/23/09/07/bicycle-7540835_1280.png"),
Image.network(
"https://cdn.pixabay.com/photo/2022/10/23/09/07/bicycle-7540835_1280.png"),
Image.network(
"https://cdn.pixabay.com/photo/2022/10/23/09/07/bicycle-7540835_1280.png"),
Image.network(
"https://cdn.pixabay.com/photo/2022/10/23/09/07/bicycle-7540835_1280.png"),
],
),
),
),
);
}
}
Example 2:
GridView(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
crossAxisSpacing: 10,
),
children: [
Image.network(
"https://cdn.pixabay.com/photo/2022/10/23/09/07/bicycle-7540835_1280.png"),
Image.network(
"https://cdn.pixabay.com/photo/2022/10/23/09/07/bicycle-7540835_1280.png"),
Image.network(
"https://cdn.pixabay.com/photo/2022/10/23/09/07/bicycle-7540835_1280.png"),
Image.network(
"https://cdn.pixabay.com/photo/2022/10/23/09/07/bicycle-7540835_1280.png"),
],
),
Example 3:
GridView(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
crossAxisSpacing: 10,
mainAxisSpacing: 10,
),
children: [
Image.network(
"https://cdn.pixabay.com/photo/2022/10/23/09/07/bicycle-7540835_1280.png"),
Image.network(
"https://cdn.pixabay.com/photo/2022/10/23/09/07/bicycle-7540835_1280.png"),
Image.network(
"https://cdn.pixabay.com/photo/2022/10/23/09/07/bicycle-7540835_1280.png"),
Image.network(
"https://cdn.pixabay.com/photo/2022/10/23/09/07/bicycle-7540835_1280.png"),
],
),
Example 4:
GridView(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
crossAxisSpacing: 10,
mainAxisSpacing: 10,
childAspectRatio: 5,
),
children: [
Image.network(
"https://cdn.pixabay.com/photo/2022/10/23/09/07/bicycle-7540835_1280.png"),
Image.network(
"https://cdn.pixabay.com/photo/2022/10/23/09/07/bicycle-7540835_1280.png"),
Image.network(
"https://cdn.pixabay.com/photo/2022/10/23/09/07/bicycle-7540835_1280.png"),
Image.network(
"https://cdn.pixabay.com/photo/2022/10/23/09/07/bicycle-7540835_1280.png"),
],
),
Example 5:
GridView(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
crossAxisSpacing: 10,
mainAxisSpacing: 10,
mainAxisExtent: 80,
),
children: [
Image.network(
"https://cdn.pixabay.com/photo/2022/10/23/09/07/bicycle-7540835_1280.png"),
Image.network(
"https://cdn.pixabay.com/photo/2022/10/23/09/07/bicycle-7540835_1280.png"),
Image.network(
"https://cdn.pixabay.com/photo/2022/10/23/09/07/bicycle-7540835_1280.png"),
Image.network(
"https://cdn.pixabay.com/photo/2022/10/23/09/07/bicycle-7540835_1280.png"),
],
),
Example 6:
GridView(
scrollDirection: Axis.horizontal,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
crossAxisSpacing: 10,
mainAxisSpacing: 10,
mainAxisExtent: 80,
),
children: [
Image.network(
"https://cdn.pixabay.com/photo/2022/10/23/09/07/bicycle-7540835_1280.png"),
Image.network(
"https://cdn.pixabay.com/photo/2022/10/23/09/07/bicycle-7540835_1280.png"),
Image.network(
"https://cdn.pixabay.com/photo/2022/10/23/09/07/bicycle-7540835_1280.png"),
Image.network(
"https://cdn.pixabay.com/photo/2022/10/23/09/07/bicycle-7540835_1280.png"),
],
),
Video Link: