🐡

【Flutter Widget of the Week #10】Tableを使ってみた

2022/10/04に公開

Flutter

初心者

table

tech

はじめに

Flutter Widget of the Week #10 Table についてまとめましたので、紹介します。
https://youtu.be/_lbE0wsVZSw

Table とは

Flutter では GridView を使えばスクロールできるグリッドを作ることができます。
では、スクロールさせないグリッド作りたいときはどうすれば良いでしょうか。
そんなときに使える Widget が今回紹介する Table です。
Table はグリッドの中の widget サイズがそれぞれ異なるときでも、
自動でサイズ変更してくれます。
なので、独自にサイズの指定をしなくて良いのです。
それでは、サンプルを動かして仕組みを見てみましょう。

Table サンプル

まずは API Document にあるサンプルを動かしてみましょう。

main.dart

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

  @override
  Widget build(BuildContext context) {
    return Table(
      border: TableBorder.all(),
      columnWidths: const <int, TableColumnWidth>{
        0: IntrinsicColumnWidth(),
        1: FlexColumnWidth(),
        2: FixedColumnWidth(64),
      },
      defaultVerticalAlignment: TableCellVerticalAlignment.middle,
      children: <TableRow>[
        TableRow(
          children: <Widget>[
            Container(
              height: 32,
              color: Colors.green,
            ),
            TableCell(
              verticalAlignment: TableCellVerticalAlignment.top,
              child: Container(
                height: 32,
                width: 32,
                color: Colors.red,
              ),
            ),
            Container(
              height: 64,
              color: Colors.blue,
            ),
          ],
        ),
        TableRow(
          decoration: const BoxDecoration(
            color: Colors.grey,
          ),
          children: <Widget>[
            Container(
              height: 64,
              width: 128,
              color: Colors.purple,
            ),
            Container(
              height: 32,
              color: Colors.yellow,
            ),
            Center(
              child: Container(
                height: 32,
                width: 32,
                color: Colors.orange,
              ),
            ),
          ],
        ),
      ],
    );
  }
}

使い方としては、 Row や Column と同じように children のなかに widget を指定します。
TableRow が1行のなかに入れる widget を設定してくれます。
また、TableCell が Table の一つのマスの widget の設定をしてくれます。
次に defaultVerticalAlignment プロパティで children のなかに入れた widgte の垂直方向と水平方向の配置方法を指定します。
columnWidths プロパティで Table の幅を指定します。
border プロパティはボーダーライン（枠線）の設定をしてます。
以上が基本的な使い方です。

Table のプロパティについて

Table にはいくつかプロパティがあります。
主要なプロパティを説明します。

(new) Table Table({
  Key? key,
  List<TableRow> children = const <TableRow>[],
  Map<int, TableColumnWidth>? columnWidths,
  TableColumnWidth defaultColumnWidth = const FlexColumnWidth(),
  TextDirection? textDirection,
  TableBorder? border,
  TableCellVerticalAlignment defaultVerticalAlignment = TableCellVerticalAlignment.top,
  TextBaseline? textBaseline,
})

①children

グリッドで表示するウィジェットをリスト形式で設定する
行（TableRow）のウィジェットを縦に並べていく形で作る
型は List<TableRow> 型

②columnWidths

Table の幅を個別に設定する
型は Map<int, TableColumnWidth> 型

TableColumnWidthに設定するクラスについて

IntrinsicColumnWidth

子要素の横幅に合わせて表示する

FlexColumnWidth

表示する横幅の比を指定する

FixedColumnWidth

固定の横幅で表示する

③defaultColumnWidth

Table の列全体の幅を設定する
型は TableColumnWidth 型

④textDirection

Table 内の列の並び順の方向を指定する
左から右、または右から左のいずれか
型は TextDirection 型

⑤border

ボーダーライン（枠線）の設定をする
型は TableBorder 型

⑥defaultVerticalAlignment

Table の縦方向の位置を指定する
デフォルトは TableCellVerticalAlignment.top（上揃え）
型は TableCellVerticalAlignment 型

最後に

今回は Table を紹介しました。
GridView は使ったことがあったのですが Table はありませんでした。
GridView との使い分けはどうするのか、
時間があるときにでも違いを調べてみようかなと思います。
次は #11 SliverAppBar です。またお会いしましょう。