GridView.builder
To show a long list or an infinite number of items that may come from the database, we need GridView.builder() constructor.
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.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
),
itemCount: items.length,
itemBuilder: (context, index) {
return Image.network(
items[index],
);
},
),
),
),
);
}
}
Example 2:
GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
),
itemCount: items.length,
itemBuilder: (context, index) {
return Image.network(
items[index],
height: 100,
width: 100,
);
},
),
Example 3:
GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
),
itemCount: items.length,
itemBuilder: (context, index) {
return Image.network(
items[index],
height: 100,
width: 100,
fit: BoxFit.fill,
);
},
),
Example 4:
GridView.builder(
padding: EdgeInsets.all(10),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 10,
mainAxisSpacing: 10,
),
itemCount: items.length,
itemBuilder: (context, index) {
return Image.network(
items[index],
height: 100,
width: 100,
fit: BoxFit.fill,
);
},
),
Video Link: