【Flutter】Gridリストの作り方【GridView】

本記事では、FLutterでGridリスト（格子状のリスト）を作成する方法を説明します。

GridViewを使う

Flutterでは、GridViewと呼ばれるWidgetを使うことで簡単に格子状のリストを作成することができます。以前紹介したListViewと同じように簡単に扱うことができます。

以下のように、パラメタを指定します。

• crossAxisCount
  • １行に表示するアイテムの数
• scrollDirection
  • スクロールの向き
  • デフォルトは縦方向
  • 横向きにする場合はhorizontalを指定
• children
  • リストに表示するWidgetのリスト

GridView.count(
  // １列に表示するアイテムの数を指定
  crossAxisCount: 3,
  // スクロールする向きを指定
  scrollDirection: Axis.vertical,
  // 200個アイテムを生成
  children: List.generate(200, (index) {
    return Center(
      child: Text(
        'Item $index',
        style: Theme.of(context).textTheme.headline5,
      ),
    );
  }),
),

GridList.builderを使う

以前紹介したListViewの時と同じように、アイテム数が決まっていないような場合や、たくさんのアイテムを表示する場合はこちらを使いましょう。builderを使う場合は行数の指定方法が少し違うので注意しましょう。

• itemBuilder
  • １アイテムを構成するWidgetをreturnで返すようにする
  • 引数のindexにリストの番号が入ってくるので、表示する内容などを変更する

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    const title = 'Grid List';

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: const Text(title),
        ),
        body: GridView.builder(
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 4,
          ),
          itemBuilder: (BuildContext context, int index) {
            return Center(
              child: Text('Item $index', style: Theme.of(context).textTheme.headline5,)
              );
          },
        ),
      ),
    );
  }
}