タイルのグリッド

CoddyのFlutterジャーニー「リストと画面」セクションの一部。レッスン 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は同じ行のタイル間の間隔です。

チャレンジ

簡単

6色がListView内に、1行に1色ずつ並んでいます。代わりに、1行に2つのタイルを配置したグリッドで表示してください。つまり、crossAxisCount: 2を指定したGridView.countを使います。タイル間の間隔は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'),
            ),
          ],
        ),
      ),
    );
  }
}