[Flutter]DataTableのcolumns(カラム)の間隔を変えるには?

Flutter

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

DataTableの列の間の余白を変える方法を紹介します。

スポンサーリンク

方法

インターフェース, インターネット, プログラム, ブラウザ, Www

DataTableのcolumnsの間隔を変えるには、引数「columnSpacing」を使います。

具体的には、DataTableの引数「coumnSpacing」に間隔を指定します。

DataTable(
  columnSpacing: 間隔,
  columns: [・・・],
  rows: [・・・],
),

DataTableの引数「columnSpacing」に指定した値が、DataTableのcolumnsの間隔になります。

使用例

@override
Widget build(BuildContext context) {
  return SafeArea(
    child: Scaffold(
      body: Center(
        child: DataTable(
          columnSpacing: 200,
          dataRowHeight: 100,
          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('男')),
              ],
            ),
          ],
        ),
      ),
    ),
  );
}

コメント

  1. テスト より:

    使用例にcolumnSpacingがない

タイトルとURLをコピーしました