Flutterでシンプルなテーブルを作る

file

【Flutter】シンプルなテーブルソース

Table(
  border: TableBorder.all(color: Colors.grey),
  children: <TableRow>[
    TableRow(
        decoration: BoxDecoration(
          color: Colors.grey.shade200,
        ),
        children: ['title1', 'title2']
            .map((e) => Container(
                alignment: Alignment.center,
                margin:
                    const EdgeInsets.only(top: 10, bottom: 10),
                child: Text(e)))
            .toList()),
    TableRow(
      children: ['abc', '123']
          .map((e) => Container(
              alignment: Alignment.center,
              margin:
                  const EdgeInsets.only(top: 10, bottom: 10),
              child: Text(e)))
          .toList(),
    ),
  ],
),

共通部関数化バージョン

// 配列から行を作成する
_toTableRow(List<String> list) {
  return list
      .map((e) => Container(
          alignment: Alignment.center,
          margin: const EdgeInsets.only(top: 10, bottom: 10),
          child: Text(e)))
      .toList();
}

// テーブル作成
return Table(
  border: TableBorder.all(color: Colors.grey),
  children: <TableRow>[
    TableRow(
        decoration: BoxDecoration(
          color: Colors.grey.shade200,
        ),
        children: _toTableRow(['title1', 'title2'])),
    TableRow(
      children: _toTableRow(['abc', '123']),
    ),
  ],
);

参考：https://api.flutter.dev/flutter/widgets/Table-class.html