[Flutter]Tableの行(Row)に枠線をつけるには？

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

Tableの行に枠線をつける方法を紹介します。

方法

Tableの行に枠線をつけるには、TableRowの引数「decoration」を使います。

まず、TableRowの引数「decoration」にBoxDecorationを指定します。

そして、BoxDecorationの引数「border」にBorder.all()を指定します。

Table(
  children: <TableRow>[
    TableRow(
      decoration: BoxDecoration(
        border: Border.all(),
      ),
      children: [・・・],
    ),
    ・・・
  ],
),

TableRowの引数「decoration」の設定をしたTableの行には、枠線がつきます。

使用例

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Center(
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Table(
              children: <TableRow>[
                TableRow(
                  decoration: BoxDecoration(
                    border: Border.all(color: Colors.red),
                  ),
                  children: [
                    Text('太郎'),
                    Text('18歳'),
                    Text('男'),
                  ],
                ),
                TableRow(
                  children: [
                    Text('花子'),
                    Text('16歳'),
                    Text('女'),
                  ],
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }