flutter

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

概要

flutterのdatatableを使ってスクロール付きの表を実装してみる。別記事でデータ部分をマップで繰り返したり、チェックボックスを入れたりしようと思います。

最終的な画面イメージ

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

完成形のDatatable1枚目 完成形のDatatable2枚目

最終的なコード

最終的な全体コードは、こちらを参照してください。

具体的な実装手順

カラムを作成する

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

 

列を作成する

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

 

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

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

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

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')),
          ],
        ),
      ],
    );

 

表示させてみる

カラム増やしたときのdatatable

データ自体は表示できると思いますが、曜日に赤く文字が表示されてしまっています。今回の例は「RIGHT OVERFLOWED BY 7.0〜」と表示されています。

これは表示領域が確保できないから、全部表示できていないよ〜〜という警告です。

そのために、スクロールを使います!

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

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

 

SingleChildScrollViewを追加した時のdatatable

そうすると先ほどの領域がないよ〜というエラーは表示されていません。

今はスクロールする方向を横に設定しているので、表に対して右へスクロールすることができます。

おわりに

スクロールを縦と横どちらもスクロールするできるような実装方法はないのかなーと思いつつ、それはデザイン的に良くないよって話なのかな。

スマホなどの端末で横に長すぎるスクロールって画面構成とかにもよると思うが使いにくいと感じるから、

タップしたら詳細画面的なところに遷移するのが一般的なのかなと思ったり。

後日、別記事でデータ部分のクラスを用意したり、チェックボックスを配置したりする記事をあげる予定です。

参考サイト

  • https://api.flutter.dev/flutter/material/DataTable/DataTable.html
  • https://www.youtube.com/watch?v=n2Dav9ONJsY
  • https://www.tutorialkart.com/flutter/flutter-datatable/
  • https://www.coderzheaven.com/2019/01/24/flutter-tutorials-datatable-android-ios/

-flutter
-, , , , ,

Copyright© エンジニアが学んだことをアウトプットしていく , 2022 All Rights Reserved Powered by AFFINGER5.