[Flutter]Table(テーブル)ウェジェットを使うには？

どうも、ちょげ(@chogetarou)です。

Tableウェジェットを方法を紹介します。

方法

Tableウェジェットを使うには、引数「children」とTableRowを使います。

まず、Tableウェジェットを必要な場所に配置します。

そして、Tableの引数「children」にリストを指定します。

リスト内には、TableRowをカンマ区切りで指定します。

Table(
  children : [
    TableRow(・・・),
    TableRow(・・・),
    TableRow(・・・),
    ・・・
  ]
)

引数「children」にTableRowのリストを指定することで、Tableウェジェットを使うことが出来ます。

使用例

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Center(
          child: Table(
            children: <TableRow>[
              TableRow(
                children: [
                  Container(
                    height: 100,
                    color: Colors.green,
                  ),
                  Container(
                    height: 100,
                    color: Colors.yellow,
                  ),
                  Container(
                    height: 100,
                    color: Colors.red,
                  ),
                ],
              ),
              TableRow(
                children: [
                  Container(
                    height: 100,
                    color: Colors.red,
                  ),
                  Container(
                    height: 100,
                    color: Colors.green,
                  ),
                  Container(
                    height: 100,
                    color: Colors.yellow,
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }