[Flutter]DataTableを横スクロールするには？

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

DataTableを横スクロールする方法を紹介します。

方法

DataTableを横スクロールするには、SingleChildScrollViewを使います。

まず、DataTableをSingleChildScrollViewでラップします。

そして、SingleChildScrollViewの引数「scrollDirection」に「Axis.horizontal」を指定します。

SingleChildScrollView(
  scrollDirection: Axis.horizontal,
  child: DataTable(
    columns: columns,
    rows: rows,
  )
),

引数「scrollDirection」に「Axis.horizontal」を指定したSingleChildScrollViewでラップすることにより、DataTableが横スクロールできるようになります。

使用例

class Sample extends StatelessWidget {
  List<Map> _list = List.generate(
    15,
    (index) => {
      'id': index,
      'name': 'Productttttttttttttttttttttttttttttttttttttttt $index',
      'price': Random().nextInt(300) + 1,
    },
  );
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SingleChildScrollView(
          scrollDirection: Axis.horizontal,
          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(),
          ),
        ),
      ),
    );
  }
}