マス目型にウィジェットを並べる GridView

ここではマス目式にウィジェットを並べるためのウィジェットである、GridView の使い方の例を紹介します。

また、ついで、と言っては何ですが、マス目に並べたウィジェットをダブルタップしたときの応答 (イベントの処理) も記載します。こちらはジェスチャ・デテクタ (GestureDetector) を使います。 GestureDetector はダブルタップだけではなく、様々なイベントに対応できますし、また使い方もとても簡単です。

というわけで、今回はマス目をダブルタップすると、そのマス目の番号をスナックバーに表示します。

マス目表示には GridView

マス目型にウィジェットを並べるには、GridView が利用できます。

GridView.count コンストラクタは メインの軸方向 scrollDirection、 それの直交方向 (クロス方向) に配置するウィジェットの数の他、マス目間の隙間を受け取ります。 children プロパティにウィジェットのリストを好きなだけ設定すると、 クロス方向に指定の数だけ折り返しながら、指定した総数ウィジェットを配置します。

上の画面では、縦方向をメインの方向として、クロス方向は 3 を指定しています。これにより、 横に 3 つウィジェットが配置されています。ウィジェットの総数は 10 としているので、3 行 3 個ずつ配置して、4行目は 1 個だけウィジェットが配置されています。

import 'package:flutter/material.dart';

void main() => runApp(
      MaterialApp(
        debugShowCheckedModeBanner: false,
        home: MyApp(),
      ),
    );

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _State();
  }
}

class _State extends State<MyApp> {
  var _scaffoldKey = new GlobalKey<ScaffoldState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      appBar: AppBar(
        title: Text('GridView demo'),
      ),
      body: Container(
        padding: EdgeInsets.all(16.0),
        child: GridView.count(
          crossAxisSpacing: 5.0,
          mainAxisSpacing: 5.0,
          scrollDirection: Axis.vertical,
          crossAxisCount: 3,
          children: List<Widget>.generate(
            10,
            _generator,
          ),
        ),
      ),
    );
  }

  Widget _generator(int index) {
    return GestureDetector(
      child: GridTile(
        child: Container(
          color: Colors.grey,
          child: Center(
            child: Text(
              '${index + 1}',
              textAlign: TextAlign.center,
              style: TextStyle(fontSize: 48),
            ),
          ),
        ),
      ),
      onDoubleTap: () {
        _scaffoldKey.currentState.showSnackBar(
          SnackBar(
            content: Text('You double tapped on ${index + 1}'),
            duration: const Duration(seconds: 1),
          ),
        );
      },
    );
  }
}

ジェスチャの認識の設定は GestureDetector を使います。

GestureDetector の child プロパティに設定したウィジェットが、応答するジェスチャ・ハンドラを設定することができます。