ビルダーで作るグリッド

CoddyのFlutterジャーニー「リストと画面」セクションの一部。レッスン 11/33。

100枚の写真を並べたグリッドも、長いリストと同じ問題があります。すべてのタイルを記述することはできず、一度にすべてを作成すると時間がかかります。GridView.builderは、ListView.builderと同じように、画面内にスクロールして入ってきたタイルを作成します。

GridView.builder(
  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 3,
  ),
  itemCount: photos.length,
  itemBuilder: (context, index) {
    return Image.network(photos[index]);
  },
)

SliverGridDelegateWithFixedCrossAxisCountという長い名前は、グリッドのレイアウトを表します。各行のタイル数を固定するものです。これは、GridView.countに直接渡していたcrossAxisCountと間隔を受け取ります。

itemCountとitemBuilderはリストの場合と同じように動作します。ビルダーには、0から始まる各タイルのindexが渡されます。

チャレンジ

簡単

カレンダーには、手書きで記入された6月の最初の週だけが表示されています。GridView.countを、30日すべてを表示し、1から番号を付けて1行に7日ずつ並べるGridView.builderに置き換えてください。

自分で試してみよう

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('June')),
        body: GridView.count(
          padding: const EdgeInsets.all(8),
          crossAxisCount: 7,
          mainAxisSpacing: 4,
          crossAxisSpacing: 4,
          children: [
            Container(
              alignment: Alignment.center,
              color: Colors.teal.shade100,
              child: const Text('1'),
            ),
            Container(
              alignment: Alignment.center,
              color: Colors.teal.shade100,
              child: const Text('2'),
            ),
            Container(
              alignment: Alignment.center,
              color: Colors.teal.shade100,
              child: const Text('3'),
            ),
            Container(
              alignment: Alignment.center,
              color: Colors.teal.shade100,
              child: const Text('4'),
            ),
            Container(
              alignment: Alignment.center,
              color: Colors.teal.shade100,
              child: const Text('5'),
            ),
            Container(
              alignment: Alignment.center,
              color: Colors.teal.shade100,
              child: const Text('6'),
            ),
            Container(
              alignment: Alignment.center,
              color: Colors.teal.shade100,
              child: const Text('7'),
            ),
          ],
        ),
      ),
    );
  }
}