[Flutter]DataTable(データテーブル)の使い方

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

DataTableの使い方を解説します。

使い方
1. columns
2. rows
使用例
まとめ

使い方

DataTableを使うには、次の２つの引数を指定します。

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

columns

１つは、引数「columns」で、データのヘッダーをDatColumnウェジェットのリストで指定します。

DataColumnは、引数「label」に項目として表示するウェジェットを指定すれば使えます。

DataTable(
  columns: [
    DataColumn(
      label: Text('名前'),
    ),
    DataColumn(
      label: Text('年齢'),
    ),
    DataColumn(
      label: Text('性別'),
    ),
  ],
  rows: [],
)

rows

もう１つは、引数「rows」で、データの表をDataRowウェジェットのリストで指定します。

DataRowは、1行分のデータを表示するウェジェットで、引数「cells」にデータをDataCellのリストで指定します。

DataCellは、引数でデータの値として表示するウェジェットを指定します。

DataTable(
  columns: [
    ・・・
  ],
  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('男')),
      ],
    ),
  ],
),

注意点としては、DataCellは、引数「columns」に指定したDataColumnに合わせて指定する必要がある点です。

使用例

以下は、使用例です。

  @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('男')),
              ],
            ),
          ],
        ),
      ),
    );
  }