Flutter DataTableを横スクロールするサンプル

2023年10月7日

環境
Windows11 pro 64bit
Flutter 3.3.7

構文

SingleChildScrollView(
  scrollDirection: Axis.horizontal,　//引数「scrollDirection」に「Axis.horizontal」を指定
  child: DataTable(
    columns: xxx,
    rows: xxx,
  )
),

引数「scrollDirection」に「Axis.horizontal」を指定したSingleChildScrollViewでラップします。
DataTableを横スクロールするには、SingleChildScrollViewを使います。

使用例

class Sample extends StatelessWidget {
  List<Map> _list = List.generate(
   xxxx
  );
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SingleChildScrollView(
          scrollDirection: Axis.horizontal,
          child: DataTable(
            columns: [
             xxx
            ],
            rows: _list
                .map(
                  xxxx
                  ),
                )
                .toList(),
          ),
        ),
      ),
    );
  }
}