In some cases, you might want to display your items as a grid rather than
a normal list of items that come one after the next.
For this task, use the GridView widget.
The simplest way to get started using grids is by using the
GridView.count() constructor,
because it allows you to specify how many rows or columns you'd like.
To visualize how GridView works,
generate a list of 100 widgets that display their index in the list.
GridView.count(
// Create a grid with 2 columns.
// If you change the scrollDirection to horizontal,
// this produces 2 rows.
crossAxisCount: 2,
// Generate 100 widgets that display their index in the list.
children: List.generate(100, (index) {
return Center(
child: Text(
'Item $index',
style: TextTheme.of(context).headlineSmall,
),
);
}),
),Interactive example
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
const title = 'Grid List';
return MaterialApp(
title: title,
home: Scaffold(
appBar: AppBar(title: const Text(title)),
body: GridView.count(
// Create a grid with 2 columns.
// If you change the scrollDirection to horizontal,
// this produces 2 rows.
crossAxisCount: 2,
// Generate 100 widgets that display their index in the list.
children: List.generate(100, (index) {
return Center(
child: Text(
'Item $index',
style: TextTheme.of(context).headlineSmall,
),
);
}),
),
),
);
}
}