Flutter Web 複数ページのテーブル

はじめに

さっきまでの私と同じような悩みを抱えている人向けに。自分でググってもなかなか解決できなかったのでまとめた。

• 横幅が広がってくれない
• スクロールバーが表示されない
• ネットで拾ったコードが古くてエラーになる
• 余計な情報が多すぎて知りたい部分がどこか分からない
• そもそも**Flutterがまだちゃんと理解できてない。**ListViewとかTableとかの使い分け方が分からない

結論

PaginatedDataTable というウィジェットが用意されているのでそれを使う

• 私が欲しかった最小限のコードはこちら

main.dart

import 'package:flutter/material.dart';

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

/// アプリ
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: HomeView());
  }
}

/// ホーム画面
class HomeView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text('Table Sample')), body: TableView());
  }
}

/// テーブル
class TableView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    /// スクロールバー
    return Scrollbar(
        isAlwaysShown: true, // true: スクロール時以外もバーを表示する
        /// スクロールする領域
        child: SingleChildScrollView(
            child: SizedBox(
                width: double.infinity, // 横幅いっぱいに広げる
                child: PaginatedDataTable(
                    showCheckboxColumn: false, // false: チェックボックスを表示しない
                    rowsPerPage: 20, // 1ページあたりの行数
                    columns: [
                      // 列のヘッダーは DataColumn として追加する
                      DataColumn(label: Text('Column A')),
                      DataColumn(label: Text('Column B')),
                      DataColumn(label: Text('Column C')),
                    ],
                    source: SampleDataSource()))));
  }
}

/// テーブルのデータ
class SampleDataSource extends DataTableSource {
  @override
  DataRow getRow(int index) {
    /// 1行文のデータ
    return DataRow(cells: [
      // 中身のデータは DataCell として追加する
      DataCell(Text('Cell A$index')),
      DataCell(Text('Cell B$index')),
      DataCell(Text('Cell C$index')),
    ]);
  }

  @override
  int get rowCount => 99; // 全行数
  @override
  bool get isRowCountApproximate => false; // 行数は常に正確な値かどうか(不明な場合はfalseにしておく)
  @override
  int get selectedRowCount => 0; // 選択された行数(選択を使用しない場合は0で問題ない)
}

注意

• Flutter 2.0 以降が必要

# バージョンを確認
flutter --version 
# 最新版へアップグレード
flutter upgrade

• Null Safety が有効であること
  • 新しくDartに追加された言語仕様のこと
  • Dart SDK を 2.12.0 以降に限定する

pubspec.yaml

... (例)

environment:
-   sdk: ">=2.7.0 <3.0.0"
+   sdk: ">=2.12.0 <3.0.0" 

• テーブルが微妙に左右にもスクロールできてしまう現象
  • 直し方わかる方いましたら教えてください🙏

さいごに!

何か間違っている箇所があればご指摘いただければ有り難いです。