Flutter ValueListenableBuilder<T> を最低限理解してみる

Hiveを使うためにValueListenableBuilderを少し理解してみた

ValueListenabel<T>と同期したコンテンツを表示するためのもの

本稿、あるいは本シリーズはFlutter初学者が理解を深めるためのプログラミングノートを公開したものです。

現在、データベースのHiveをFlutterで使うべく学習中です。参考動画はこちら。
https://youtu.be/w8cZKm9s228

[参考コードはこちら。[(https://github.com/JohannesMilke/hive_database_example/blob/master/lib/page/transaction_page.dart)

今回学ぶのは、Hiveというデータベースで保存したデータを表示したいページに表示するというもので、それらをデータを取得し、ウィジェットとして表示するために、ValueListenableBuilderなるものを使用するようです。

公式ドキュメントではこのように記述されています。

内容がValueListenableと同期しているウィジェットです。

ValueListenable<T>と、Tの具体的な値からウィジェットを構築するビルダーが与えられると、このクラスは自動的にValueListenableのリスナーとして登録し、値が変更されると更新された値でビルダーを呼び出します。

Flutterドキュメント https://api.flutter.dev/flutter/widgets/ValueListenableBuilder-class.html　2021年9月20日に引用

そして、今回扱うコードはこのような感じ。

///略
	
@override
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(
          title: Text('Hive Expense Tracker'),
          centerTitle: true,
        ),
        body: ValueListenableBuilder<Box<Transaction>>(
          valueListenable: Boxes.getTransactions().listenable(),
          builder: (context, box, _) {
            final transactions = box.values.toList().cast<Transaction>();

            return buildContent(transactions);
          },
        ),
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.add),
          onPressed: () => showDialog(
            context: context,
            builder: (context) => TransactionDialog(
              onClickedDone: addTransaction,
            ),
          ),
        ),
      );

BoxというのはHiveにおけるデータを保存する箱のようなもので、openしたりcloseしたり、使い勝手は他のデータベースとそこまで大きな違いはなさそうに見えます。データはキーバリューで保存します。

ここでは、Transactionというクラスを作っておいて、transactionという名前でBoxを開いています。他のコードやメソッドを解説すると時間がかかりすぎるので、本題へ。

ValueListenableBuilderについてさらに公式ドキュメントを読み進めてみる。

ビルダー関数に ValueListenable の値に依存しないサブツリーが含まれている場合、アニメーションの刻みごとにサブツリーを再構築するのではなく、一度だけサブツリーを構築する方が効率的です。

事前に構築されたサブツリーを子パラメータとして渡すと、ValueListenableBuilderはそれをビルダー関数に戻し、ビルドに組み込むことができます。

この事前に構築された子を使用することは完全にオプションですが、場合によってはパフォーマンスが大幅に向上することがあるので、良い習慣と言えます。

https://api.flutter.dev/flutter/widgets/ValueListenableBuilder-class.html 2021年9月20日に引用

https://youtu.be/s-ZG-jS5QHQ

つまり、たくさんデータがあり、またそれらが変更される可能性を持つ場合、いちいち毎回手作業で書き換えるワケにいかないので、追加された時や変更された時に自動的に再構築してくれるような役割を担うのが、ValueListenableBuilderのようです。