[Flutter]DataTableの枠線の太さを変えるには？

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

DataTableの枠線の太さを変える方法を紹介します。

方法
使用例

方法

DataTableの枠線の太さを変えるには、引数「Boder.all()」を使います。

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

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

そして、Border.all()の引数「width」に枠線の太さを設定します。

DataTable(
  decoration: BoxDecoration(
    border: Border.all(
        width : /*枠線の太さ*/
    ),
  ),
  columns: [
    ・・・
  ],
  rows: [
      ・・・
  ],
),

これでDataTableの枠線の太さが変わります。

使用例

以下は、使用例です。

  List<Map> _list = List.generate(
    14,
    (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(
                width: 5, //枠線の太さ
              ),
            ),
            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,
        ),
      ),
    );
  }