[Flutter]DataTable(データテーブル)のColumn(カラム)の横幅(width)を設定するには？

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

DataTable内のDataColumnの横幅を設定する方法を紹介します。

方法
使用例

方法

DataTableのカラムの横幅を設定するには、ContainerもしくはSizedBoxを使います。

まず、設定したいカラムに該当するDataColumnの引数「label」のウェジェットを、ContainerもしくはSizedBoxでラップします。

そして、ContainerもしくはSizedBoxの引数「width」に横幅を指定します。

DataTable(
  columns: [
    ・・・
    DataColumn(
      label: Container(
        width: /*横幅*/,
        child: Widget(),
      ),
    ),
    ・・・
  ],
  rows: [・・・],
),

これでDataTableのカラムの横幅を設定することが出来ます。

使用例

以下は、使用例です。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: DataTable(
          columns: [
            DataColumn(
              label: Text('id'),
            ),
            DataColumn(
              label: Container(
                width: 190,
                child: Text('名前'),
              ),
            ),
            DataColumn(
              label: Text('値段'),
            ),
          ],
          rows: _list
              .map(
                (e) => DataRow(
                  cells: [
                    DataCell(
                      Text('${e['id']}'),
                    ),
                    DataCell(
                      Text('${e['name']}'),
                    ),
                    DataCell(
                      Text('${e['price']}円'),
                    ),
                  ],
                ),
              )
              .toList(),
        ),
      ),
    );
  }