[Flutter]「データの表」を表示するには？

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

Flutterでデータの表を表示する方法を紹介します。

方法

Flutterでデータの表を表示するには、DataTableを使います。

DataTableは、次の２つの引数を指定することで、データの表を表示できます。

• columns : 表のヘッダーに表示する項目を指定
• rows : 表のデータを指定

引数「columns」には、表のヘッダーに表示する項目をDataColumnのリストで指定します。

DataTable(
  columns: [
    DataColumn(
      label: /*項目として表示するウェジェット*/,
    ),
    DataColumn(
      label: /*項目として表示するウェジェット*/,
    ),
    DataColumn(
      label: /*項目として表示するウェジェット*/,
    ),
    ・・・
  ],
),

引数「rows」に表のデータをDataRowのリストで指定します。

DataTable(
  columns: [
    ・・・
  ],
  rows: [
    DataRow(
      cells: [
        DataCell(/*データとして表示するウェジェット*/),
        DataCell(/*データとして表示するウェジェット*/),
        DataCell(/*データとして表示するウェジェット*/),
        ・・・
      ],
    ),
    DataRow(
      cells: [
        ・・・
      ],
    ),
    DataRow(
      cells: [
        ・・・
      ],
    ),
    ・・・
  ],
),

これでデータの表が表示されます。

使用例

以下は、使用例です。

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: DataTable(
          columns: [
            DataColumn(
              label: Text('名前'),
            ),
            DataColumn(
              label: Text('年齢'),
            ),
            DataColumn(
              label: Text('性別'),
            ),
          ],
          rows: [
            DataRow(
              cells: [
                DataCell(Text('太郎')),
                DataCell(Text('19')),
                DataCell(Text('男')),
              ],
            ),
            DataRow(
              cells: [
                DataCell(Text('さゆり')),
                DataCell(Text('24')),
                DataCell(Text('女')),
              ],
            ),
            DataRow(
              cells: [
                DataCell(Text('吾郎')),
                DataCell(Text('34')),
                DataCell(Text('男')),
              ],
            ),
          ],
        ),
      ),
    );
  }