Flutterアプリ開発メモ(1) --- ボディ部分をスクロールできるテーブル ---

概要

ボディ部分をスクロールできるテーブルのコーディング方法の自分用メモ。

---

背景と目的

Flutterで、ボディ部分をスクロールできるテーブルを実装する必要が出た。自分用に、コーディング方法をまとめておく。

---

詳細

1. 全体構成を整理

作成するテーブルは、サンプルとしてとりあえず、

• ヘッダ
  • 1行3列
• ボディ
  • 10行3列
  • ここを必要に応じてスクロールできるようにする
• 列幅
  • 3列とも100px
• 行高さ
  • すべて50px

とする。

2. 全体

ScrollableTableというクラスを定義。描画時に領域が分かりやすいように、Containerのcolorプロパティを設定。childにColumnウィジェットを置き、後述のヘッダとボディを格納する。

class ScrollableTable extends StatelessWidget {
  const ScrollableTable({super.key, required headers});

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(5),
      color: Colors.lightBlue,
      // height: 300,
      // width: 300,
      child: Column(
        children: [const ScrollableTableHeader(headers: {}), ScrollableTableBody()],
      ),
    );
  }
}

3. ヘッダ

このテーブルを実装する上ではあまり重要ではないが、一応。領域が分かりやすいように、colorにtealを設定。

class ScrollableTableHeader extends StatelessWidget {
  const ScrollableTableHeader({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.teal,
      height: 50,
      child: const Row(
        children: [
          SizedBox(width: 100, child: Text("Head1")),
          SizedBox(width: 100, child: Text("Head2")),
          SizedBox(width: 100, child: Text("Head3")),
        ],
      ),
    );
  }
}

4. ボディ

以下がキモである。

• Expandウィジェットを最外殻に置く。
• その中にScrollbarウィジェットを置く。
• さらにその中にSingleChildScrollViewウィジェットを置く。
• ScrollController型のフィールドを持たせ、ScrollbarウィジェットとSingleChildScrollViewウィジェットのcontrollerプロパティに同一インスタンスを設定する。

ボディの行アイテムとして、後述のScrollableTableRowクラスのインスタンスを並べた。

class ScrollableTableBody extends StatelessWidget {
  ScrollableTableBody({super.key});

  // スクロールコントローラを作成
  final ScrollController scrollController = ScrollController();

  @override
  Widget build(BuildContext context) {
    return Expanded(
        child: Scrollbar(
            controller: scrollController, // コントローラを付与
            thickness: 10,
            radius: const Radius.circular(5),
            thumbVisibility: true,
            trackVisibility: true,
            child: SingleChildScrollView(
                controller: scrollController, // コントローラを付与
                child: Column(
                  children: [
                    ScrollableTableRow(index: 1),
                    ScrollableTableRow(index: 2),
                    ScrollableTableRow(index: 3),
                    ScrollableTableRow(index: 4),
                    ScrollableTableRow(index: 5),
                    ScrollableTableRow(index: 6),
                    ScrollableTableRow(index: 7),
                    ScrollableTableRow(index: 8),
                    ScrollableTableRow(index: 9),
                    ScrollableTableRow(index: 10),
                  ],
                ))));
  }
}

5. ボディの行アイテム

このテーブルを実装する上ではあまり重要ではないが、一応。領域が分かりやすいように、colorにwhiteを設定。

class ScrollableTableRow extends StatelessWidget {
  ScrollableTableRow({super.key, required this.index, this.backgroundColor=Colors.white});

  Color? backgroundColor;
  final int index;

  @override
  Widget build(BuildContext context) {
    return Container(
      // color: backgroundColor,
      height: 50,
      decoration: BoxDecoration(color: backgroundColor, border: Border(bottom: BorderSide(color: Colors.grey))),
      child: Row(
        children: [
          SizedBox(width: 100, child: Text("Cell${index}1")),
          SizedBox(width: 100, child: Text("Cell${index}2")),
          SizedBox(width: 100, child: Text("Cell${index}3")),
        ],
      ),
    );
  }
}

6. 動作確認

• 全体高さが十分にある場合

スクロールバーは出現しない。

• 全体高さを縮めた場合

スクロールバーが表示され、ボディ部分がスクロール可能である。

---

まとめと今後の課題

Flutterで、ボディ部分をスクロールできるテーブルの実装方法をまとめられたので、実戦投入していきたい。