[Flutter] 縦横スクロールできる表を作る

縦横スクロールできる表をつくってみたので紹介します。

コード

Widget _table(List<DataColumn> columnList, List<DataRow> rowList) {
    // ListViewで縦スクロール, SingleChildScrollViewで横スクロール設定している
    return ListView(
      children: [
        SingleChildScrollView(
          scrollDirection: Axis.horizontal,
          child: DataTable(columns: columnList, rows: rowList),
        )
      ],
    );
  }

これだけでできるなんてFlutterすごい。。。

全文

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  final labels = List<DataColumn>.generate(5, (int index) => 
    DataColumn(label: Text("ラベル$index")
  ), growable: false);

  final values = List<DataRow>.generate(20, (int index) {
    return DataRow(cells: [
      DataCell(Text("山田$index郎")),
      const DataCell(Text("男性")),
      const DataCell(Text("2000/10/30")),
      const DataCell(Text("東京都港区")),
      const DataCell(Text("会社員")),
    ]);
  }, growable: false);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Padding(
          padding: const EdgeInsets.all(8.0),
          child: _table(labels, values),
        ));
  }

  Widget _table(List<DataColumn> columnList, List<DataRow> rowList) {
    // ListViewで縦スクロール, SingleChildScrollViewで横スクロール設定している
    return ListView(
      children: [
        SingleChildScrollView(
          scrollDirection: Axis.horizontal,
          child: DataTable(columns: columnList, rows: rowList),
        )
      ],
    );
  }
}

DataTableの基本的な使い方はこちらが参考になりました。

TableをColumnやRowなどの子として使いたいときの注意点

tableウィジェットをColumnやRowなどの子として使いたいときは、そのまま配置すると表が見えなくなってしまいます。

ダメな例

Column(
    children: [
      const Text("顧客一覧"),
      _table(labels, values), 
    ]
)

これはテーブル自身が表示領域をどこまで広げていいのかわからなくなっているのが原因だと思います。
ので、改善案としてはExpandedウィジェットを使って 子ウィジェットが利用可能なスペースを目一杯埋めてあげるのが良さそうです。

改善例

Column(
    children: [
      const Text("顧客一覧"),
      Expanded(child: _table(labels, values)),
    ]
)