🐡

FlutterのDataTableについて（2022年12月情報）

2022/12/10に公開

2件

Flutter

tech

Flutter Advent Calendar 2022の10日目の記事になります。
（夜になってしまい申し訳ないです！）

変更履歴

2024/5/6
コメント受けてPaginatedDataTable2のサンプルコードDataTableSourceのクラスに引数でcontextを追加しました。

はじめに

私の観測範囲ですが、
モバイルアプリだけではなく、WebサイトでもFlutterを利用するケースが増えてきているように思っています。

例えば、モバイルアプリに表示するデータを編集する「管理画面」など。
「違うチーム・別の言語を使って開発するより、同じチーム・同じFlutterで開発したい」
、とFlutter Webを選択する場面は多いのではないでしょうか。
(実際、私の今のチームもそうです！)

今回は、Flutter Webで管理画面を作成するときに
よく想定される テーブル（DataTable）にフォーカルした話 をしたいと思います！

更新状況・バージョン情報

更新状況（記事は最新更新日の情報しか載っていない想定です）

2022年12月10日初稿

バージョン情報など

Flutter

Flutter 3.3.9 • channel stable • https://github.com/flutter/flutter.git
Framework • revision b8f7f1f986 (3 weeks ago) • 2022-11-23 06:43:51 +0900
Engine • revision 8f2221fbef
Tools • Dart 2.18.5 • DevTools 2.15.0

対象のDataTable
flutter_web_data_table: ^1.0.0
data_table_2: ^2.3.9

書くこと・書かないこと

書くこと

Flutter Web を想定したDataTable
DataTableのパッケージの整理
軽い実装例

書かないこと

Flutter Web 全般に関わる話
- 「DataTable」にフォーカスした話しかしません。
モバイルアプリを想定したDataTable

各種パッケージなど

pub.devでWebサポートありの「DataTable」を検索すると、こんな感じです。
pubdev

DataTable class

そもそも、公式でもクラスが存在してます！
公式サイト） DataTable_class

youtube

youtubeの内容をそのまま書くと、以下のようなことが可能です。

ソート方法の表示
選択行の表示
編集可能のセルの表示
空欄のセルの表示
全ての要素にコールバックが備わっている（挙動を追加することができる）
全ての要素（セル）がWidgetでアイコンでも何でも入れられる。

公式なので、「サポートが安心」という側面もあります。
ただ、自動的な「ページング」の機能はありません。
説明がわかりやすいので「DataTable class」に言及しましたが、
「Webの管理画面」においてはPaginatedDataTable_classの方が適していそうです。

flutter_web_data_table

pub.devのページ
ソート・検索（filtering）・ページネーションなど、必要機能が最低限備わっています！

作者の方は「flutter_admin_scaffold」や「flutter_bootstrap_widgets」などを作っている方で、
BootStrapに馴染み深いなら使いやすいかも、です。（実際私も使ったことがあります！）

使うにあたって懸念点として挙げられるのは。「最終更新日が19ヶ月前」というところ。(あくまで2022/12/10の情報)
軽く使ってみた限りでは「material 3」などとも親和性は薄いかもです。

data_table_2

pub.devのページ
「POPULARITY」の値としては一番高いです。
デモページでもいろんな表示パターンを確認できます。
デモページ

公式との違いも明確に説明されていて非常にわかりやすいです。
Extra Features
「固定ヘッダー」や「垂直で線を引きたい」といった要件がある場合は、このパッケージを利用するのが簡単そうです。

更新頻度も今のところ月一くらいはあります（あくまで2022/12/10の情報）

お試し

それぞれ試してみました。本体のリポジトリ

実装してみようと思うと、データの扱い方など、割と引っかかったので参考になれば幸いです。
（「riverpodを使っている例」としても活用できればと思って、riverpod使ってます）

引っかかった部分はコメントも残してます。

方針としては、DataTableの実装で留意すべきところは以下であると考えて、実装しました。

行を選択すると選択したデータが表示される。
上記がソート後も正しいデータで実行できる。

DataTable_class

状態管理部分

実装の参考

flutter_web_data_table

状態管理部分

結論、flutter_web_data_tableだけが異なる書き方でした。
Rowのデータ構造をMap<String, dynamic>に強制され、処理が簡単になる部分もあれば、
型の扱いが面倒になる部分もありました。
型安全という意味では、避けた方が無難かもです。

DataTable2_class

DataTable_classと書き方は変わりませんでした。
デフォルトで横幅いっぱいまで広がってくれるのは使いやすい気がします。

状態管理部分
DataTable classと一緒

デザインの調整やExtra Featuresの部分は公式より優っているのだと思いますが
特に、Extra Featuresの部分を利用しないのであれば、公式のものでいいかもしれません。

PaginatedDataTable2

sourceに「DataTableSource」を指定する必要があるようで、少し書き方違いました。
(2024/5/6 他の例と同じ処理になるようにDataTableSourceの引数にcontextを追加)

状態管理は
DataTable classと一緒

参考（単純化してくださってます！）

以上です！

Discussion

おまえのあかりん 1ヶ月前

わかりやすい記事ありがとうございます！
PaginatedDataTable2のSampleDataSourceには、

class SampleDataSource extends DataTableSource {
  SampleDataSource(this.context, this.articleList);  // 追加

  final BuildContext context;  // 追加
  final List<Article> articleList;

のようにして、
呼び出し側で

source: SampleDataSource(context, dataTableState.articleList),

のようにcontextを渡してあげるとcontextを使用することができました。

beeeyan 9日前

contextの件、試してみて動作確認できたのでソースコードの内容更新させてもらいました！
コメント誠にありがとうございます！