GridView.count()
GridView.count is the most commonly used grid layout. Because we already know the size of the grid.
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> {
List items = [
"https://cdn.pixabay.com/photo/2022/10/23/09/07/bicycle-7540835_1280.png",
"https://cdn.pixabay.com/photo/2022/10/23/09/07/bicycle-7540835_1280.png",
"https://cdn.pixabay.com/photo/2022/10/23/09/07/bicycle-7540835_1280.png",
"https://cdn.pixabay.com/photo/2022/10/23/09/07/bicycle-7540835_1280.png",
"https://cdn.pixabay.com/photo/2022/10/23/09/07/bicycle-7540835_1280.png",
"https://cdn.pixabay. com/photo/202219/23/09/07/bicycle-7540835_1280.png",
"https://cdn.pixabay.com/photo/2022/10/23/09/07/bicycle-7540835_1280.png",
"https://cdn.pixabay.com/photo/2022/10/23/09/07/bicycle-7540835_1280.png",
"https://cdn.pixabay.com/photo/2022/10/23/09/07/bicycle-7540835_1280.png",
"https://cdn.pixabay.com/photo/202/10/23/09/07/bicycle-7540835_1280.png",
];
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(),
body: Center(
child: GridView.count(
crossAxisCount: 2,
children: List.generate(
items.length,
(index) => Image.network(
items[index],
),
),
),
),
),
);
}
}
Example 2:
GridView.count(
crossAxisCount: 2,
crossAxisSpacing: 5,
children: List.generate(
items.length,
(index) => Image.network(
items[index],
),
),
),
Example 3:
GridView.count(
crossAxisCount: 2,
crossAxisSpacing: 5,
mainAxisSpacing: 5,
children: List.generate(
items.length,
(index) => Image.network(
items[index],
),
),
),
Example 4:
GridView.count(
crossAxisCount: 2,
crossAxisSpacing: 5,
mainAxisSpacing: 5,
padding: EdgeInsets.all(10),
children: List.generate(
items.length,
(index) => Image.network(
items[index],
),
),
),
Video Link: