Сетка GridView в Flutter

Не всё удобно показывать одной колонкой. Иконки приложений, превью, категории часто кладут в сетку. Виджет GridView прокручивает потомков и раскладывает их по ячейкам, как таблица без явных границ.

Конструктор GridView.count задаёт фиксированное число колонок параметром crossAxisCount. Список children заполняет ячейки слева направо, затем следующая строка. Зазор между строками и колонками задают mainAxisSpacing и crossAxisSpacing. При большом числе элементов сетка листается так же, как ListView:

import 'package:flutter/material.dart';

void main() {
	runApp(const MaterialApp(home: HomePage()));
}

class HomePage extends StatelessWidget {
	const HomePage({super.key});

	static const labels = [
		'Tea',
		'Coffee',
		'Juice',
		'Water',
		'Cocoa',
		'Lemonade',
	];

	@override
	Widget build(BuildContext context) {
		return Scaffold(
			body: GridView.count(
				crossAxisCount: 2,
				padding: const EdgeInsets.all(8),
				mainAxisSpacing: 8,
				crossAxisSpacing: 8,
				children: [
					for (final label in labels)
						Card(
							child: Center(child: Text(label)),
						),
				],
			),
		);
	}
}

Соберите GridView.count с crossAxisCount: 2 и шестью Card. В каждой карточке по центру - Text с цифрой от 1 до 6. Отступы между ячейками - 8.