1. はじめに

flutter で SingleChildScrollView と datatable を使ってスクロール付きの表を実装してみる。

2. 最終的な画面イメージ

スクロール（今回は横）できるデータテーブルのイメージ。サンプルのため少し画面の横幅を狭くしています。

3. 最終的なコード

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  static const String _title = 'DatatableSample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: MyStatelessWidget(),
      ),
    );
  }
}

class MyStatelessWidget extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      // スクロールする方向
      scrollDirection: Axis.horizontal,
      child: DataTable(
      columns: const <DataColumn>[
        DataColumn(label: Text('日付')),
        DataColumn(label: Text('曜日')),
        DataColumn(label: Text('開始')),
        DataColumn(label: Text('終了')),
        DataColumn(label: Text('その他')),
      ],
      rows: const <DataRow>[
        DataRow(
          cells: <DataCell>[
            DataCell(Text('5月1日')),
            DataCell(Text('月')),
            DataCell(Text('9:00')),
            DataCell(Text('18:00')),
            DataCell(Text('dummy')),
          ],
        ),
      ],
      )
    );
  }
}

4. 具体的な実装手順

1.カラムを作成する

DataTable(
  columns: [
      DataColumn(
      label: Text("日付"),
    ),
    DataColumn(
      label: Text("曜日"),
    ),
  ]
)

2.列を作成する

これで最低限のカラムと値は用意できます。

rows: const <DataRow>[
  DataRow(
    cells: <DataCell>[
      DataCell(Text('5月1日')),
      DataCell(Text('金')),
    ],
]

3.表示するカラムと値の追加

メインとなるスクロール機能追加の前にカラムと値を増やしておきます。

return DataTable(
      columns: const <DataColumn>[
        DataColumn(label: Text('日付')),
        DataColumn(label: Text('曜日')),
        DataColumn(label: Text('開始')),
        DataColumn(label: Text('終了')),
        DataColumn(label: Text('その他')),
      ],
      rows: const <DataRow>[
        DataRow(
          cells: <DataCell>[
            DataCell(Text('5月1日')),
            DataCell(Text('月')),
            DataCell(Text('9:00')),
            DataCell(Text('18:00')),
            DataCell(Text('dummy')),
          ],
        ),
      ],
    );

4.表示させてみる

データ自体は表示できると思いますが、曜日に赤く文字が表示されてしまっています。今回の例は「RIGHT OVERFLOWED BY 7.0〜」と表示されています。
これは表示領域が確保できないから、全部表示できていない。という警告です。
そのために、スクロールを使います。

5.スクロール機能を追加する

導入すると警告の文言が消えます。
スクロールする方向を横に設定しているので、表に対して右へスクロールすることができます。

SingleChildScrollView(
   // スクロールする方向(今回は横にスクロール)
   scrollDirection: Axis.horizontal,
   child: DataTable(
     // ここに先ほど作ったカラムと値を入れる
   )
)

5. おわりに

スクロールを縦と横どちらもスクロールするできるような実装方法はないのかな、と思うのですが、それはデザイン的に良くないよって話なのかな。
スマホなどの端末で横に長すぎるスクロールって画面構成とかにもよると思うが使いにくいと感じるから、タップしたら詳細画面的なところに遷移するのが一般的なのかなと思ったり。
デザインや技術的にベストプラクティスお持ちの方よければご教授いただけると嬉しいです。

[Flutter] SingleChildScrollViewを使ってdatatableを実装してみた

目次