[Flutter]DataTable(データテーブル)に枠線(border)をつけるには？

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

DataTableに枠線をつける方法を紹介します。

方法
使用例
1. 関連

方法

DataTableに枠線をつけるには、引数「decoration」を使います。

まず、DataTableの引数「decoration」にBoxDecorationを指定します。

そして、BoxDecorationの引数「border」にBorder.all()を指定します。

DataTable(
  decoration: BoxDecoration(
    border: Border.all(),
  ),
  columns: [
    ・・・
  ],
  rows: [
      ・・・
  ],
),

これでDataTableに枠線がつきます。

使用例

以下は、使用例です。

  List<Map> _list = List.generate(
    15,
    (index) => {
      'id': index,
      'name': 'Product $index',
      'price': Random().nextInt(300) + 1,
    },
  );

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: SizedBox(
          child: DataTable(
            decoration: BoxDecoration(
              border: Border.all(
                color: Colors.pink,
                width: 2,
              ),
            ),
            columns: [
              DataColumn(
                label: Text('id'),
              ),
              DataColumn(
                label: Text('名前'),
              ),
              DataColumn(
                label: Text('値段'),
              ),
            ],
            rows: _list
                .map(
                  (e) => DataRow(
                    cells: [
                      DataCell(
                        Text('${e['id']}'),
                      ),
                      DataCell(
                        Text('${e['name']}'),
                      ),
                      DataCell(
                        Text('${e['price']}円'),
                      ),
                    ],
                  ),
                )
                .toList(),
          ),
          width: double.infinity,
        ),
      ),
    );
  }