Сетка из плиток

Часть раздела Списки и экраны путешествия по Flutter на Coddy. Урок 10 из 33.

В фотогалерее или на главном экране приложения элементы расположены рядом друг с другом в рядах, а не в одном длинном столбце. GridView.count размещает дочерние элементы в сетке и прокручивается, как список:

GridView.count(
  crossAxisCount: 2,
  mainAxisSpacing: 8,
  crossAxisSpacing: 8,
  children: [
    Container(color: Colors.red),
    Container(color: Colors.blue),
    Container(color: Colors.green),
  ],
)

crossAxisCount — это количество плиток в каждом ряду. Плитки заполняют ряды слева направо, затем начинается новый ряд. Каждая плитка квадратная, а ширина ряда распределяется между его плитками.

mainAxisSpacing задаёт расстояние между рядами, а crossAxisSpacing — расстояние между плитками в одном ряду.

Задание

Легко

Шесть цветов расположены в ListView, по одному в каждой строке. Вместо этого отобрази их в виде сетки с двумя плитками в строке: используй GridView.count с параметром crossAxisCount: 2. Оставь между плитками расстояние в 8 пикселей.

Попробуйте сами

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: const Text('Colors')),
        body: ListView(
          padding: const EdgeInsets.all(8),
          children: [
            Container(
              color: Colors.red,
              alignment: Alignment.center,
              child: const Text('Red'),
            ),
            Container(
              color: Colors.orange,
              alignment: Alignment.center,
              child: const Text('Orange'),
            ),
            Container(
              color: Colors.yellow,
              alignment: Alignment.center,
              child: const Text('Yellow'),
            ),
            Container(
              color: Colors.green,
              alignment: Alignment.center,
              child: const Text('Green'),
            ),
            Container(
              color: Colors.blue,
              alignment: Alignment.center,
              child: const Text('Blue'),
            ),
            Container(
              color: Colors.purple,
              alignment: Alignment.center,
              child: const Text('Purple'),
            ),
          ],
        ),
      ),
    );
  }
}