ピン留めされたアイテム

サードパーティパッケージを使わずに状態を管理する

「状態管理」、Flutterに限らずアプリケーション開発において考えなくてはならないトピックです。
Flutterのアプリ開発ではRiverpodなどの状態管理パッケージを使うことが多いと思いますが、Flutterの公式ドキュメント、First week experience of Flutter の State management にFlutterが標準で提供している状態管理について書かれていました。
理解を深めたいと思い、読んだり自分でもコードを書いたりしてみました。

StatefulWidgetを使う

状態を管理する一番シンプルな方法です。
以下が実現できています。

状態のカプセル化
- MyCounterを使うウィジェットからはMyCounterで管理しているStateは見えず、変更もできません
ライフサイクル
- _MyCounterStateオブジェクトはMyCounterウィジェットが初めて構築された時に生成され、画面から取り除かれるまで存在する

非常にシンプルですね。

class MyCounter extends StatefulWidget {
  const MyCounter({super.key});

  @override
  State<MyCounter> createState() => _MyCounterState();
}

class _MyCounterState extends State<MyCounter> {
  int count = 0;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text('Count: $count'),
          TextButton(
            onPressed: () {
              setState(() {
                count++;
              });
            },
            child: const Text('Increment'),
          )
        ],
      ),
    );
  }
}

複数のWidget間でStateを共有したい場合、複数のアプローチがあります。

コンストラクタ引数でStateを渡す

まず、真っ先に思いつくのはStateをそれを必要としているWidgetに渡すことです。
コンストラクタ引数でStateを受け取るようにして内部で保持すればbuildメソッドの中でも使えます。

class MyCounter extends StatelessWidget {
  final int count;
  const MyCounter({super.key, required this.count});

  @override
  Widget build(BuildContext context) {
    return Text('$count');
  }
}

Widgetを使う側もコンストラクタ引数にStateを渡すだけなのでわかりやすいです。

Column(
  children: [
    MyCounter(
      count: count,
    ),
    MyCounter(
      count: count,
    ),
    TextButton(
      child: Text('Increment'),
      onPressed: () {
        setState(() {
          count++;
        });
      },
    )
  ],
)

でもこれって、Reactでいうpropsで情報を渡してるだけだなと思っていたら

sometimes called "prop drilling" in other frameworks

との記載がありました。やはりそのようです。
いわゆるバケツリレーなので、Widgetの階層が深くなるとReactのコンポーネントでも起きたのと同じような以下の問題が起きることになります。

Stateを使うWidgetに届けるまでに同じようなコードを書かないといけない
Stateを使うWidgetだけでなく中間のWidgetもムダにbuildメソッドが呼ばれる

コードの保守性の観点からもパフォーマンスの観点からも良いとは言えないです。
そこでFlutterはInheritedWidget というウィジェットを提供しています。

InheritedWidgetを使う

InheritedWidgetを使うと、ウィジェットの上位階層で保持しているStateを
階層を超えてStateを利用したいWidgetに通知することができます。

InheritedWidgetを継承したクラスを作り、Stateを保持します。
staticなofメソッドを定義し、BuildContextのdependOnInheritedWidgetOfExactTypeメソッドを使い、その結果を返すようにしておきます。
dependOnInheritedWidgetOfExactTypeメソッドは引数のcontextから見てツリー上の祖先で直近のInheritedWidgetを検索・取得するAPIです。

また、Stateが変化した時に購読者（ofメソッドを呼んだウィジェット）に通知できるようにupdateShouldNotifyメソッドをオーバーライドします。古いStateと今のStateが異なっていたらtrueを返すことで購読者に通知されます。

class MyState extends InheritedWidget {
  const MyState({
    super.key,
    required this.count,
    required super.child,
  });

  final int count;

  static MyState of(BuildContext context) {
    // This method looks for the nearest `MyState` widget ancestor.
    final result = context.dependOnInheritedWidgetOfExactType<MyState>();

    assert(result != null, 'No MyState found in context');

    return result!;
  }

  @override
  // This method should return true if the old widget's data is different
  // from this widget's data. If true, any widgets that depend on this widget
  // by calling `of()` will be re-built.
  bool updateShouldNotify(MyState oldWidget) => count != oldWidget.count;
}

InheritedWidgetを継承したMyStateを使う側は以下のようになります。
MyStateコンストラクタでStateと子ウィジェットを渡します。
渡しているのはChild1ですが、Stateを使っているのはChild2です。
Child2のbuildメソッド中のMyState.of(context).count;でStateを取得しています。
Stateが変わるたびにChild2のbuildメソッドが呼び出されUIが更新されます。

Stateを使うChild2ではStateを保持していません。
また、Child2の親のChild1にはStateに関するコードはありません。
バケツリレーが無くなりました 😄

class MyCounter extends StatefulWidget {
  const MyCounter({super.key});

  @override
  State<MyCounter> createState() => _MyCounterState();
}

class _MyCounterState extends State<MyCounter> {
  int count = 0;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          MyState(count: count, child: const Child1()),
          TextButton(
            onPressed: () {
              setState(() {
                count++;
              });
            },
            child: const Text('Increment'),
          )
        ],
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) => const Child2();
}

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

  @override
  Widget build(BuildContext context) {
    final count = MyState.of(context).count;
    return Text('Count: $count');
  }
}

コールバックで親ウィジェットにStateを渡す

これまで親から子にStateを共有する方法を見てきました。
子がStateを管理していて、親に通知したい場合にはコールバックを使います。

ValueChanged型の定義は

typedef ValueChanged<T> = void Function(T value);

となっていて、指定した型の値を1つ受け取れる関数型です。

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

  @override
  Widget build(BuildContext context) {
    return MyCounter(
        // コールバック経由で値を受け取る
        onChanged: (newCount) => {
              debugPrint('New count: $newCount'),
            });
  }
}

class MyCounter extends StatefulWidget {
  const MyCounter({super.key, required this.onChanged});

  final ValueChanged<int> onChanged;

  @override
  State<MyCounter> createState() => _MyCounterState();
}

class _MyCounterState extends State<MyCounter> {
  int count = 0;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text('Count: $count'),
          TextButton(
            onPressed: () {
              final newCount = count + 1;
              setState(() {
                count = newCount;
              });

              // コールバック関数を呼ぶ
              widget.onChanged(newCount);
            },
            child: const Text('Increment'),
          )
        ],
      ),
    );
  }
}

状態管理をWidgetから切り離す

ここまでStateをWidget間で共有する方法を見てきましたが、あくまでStateの管理はStatefulWidget内で行ってきました。
同じStateを複数のWidgetで共有するなら特定のWidgetではなく、それ用のオブジェクトに状態管理を任せた方が良さそうです。Stateを更新するロジックもそのオブジェクトに実装できるとWidgetからState更新のロジックが無くなってスッキリしそうです。

ChangeNotifierを使う

ChangeNotifierを使うと、Stateを保持し、Stateの更新を購読者に通知することができます。

class CounterNotifier extends ChangeNotifier {
  int _count = 0;
  int get count => _count;

  void increment() {
    _count++;
    notifyListeners();
  }
}

final counterNotifier = CounterNotifier();

使う側はListenableBuilderのパラメータにcounterNotifierを渡し、
Stateが通知された時に呼ばれるbuilder関数でWidgetを返します。

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

  @override
  Widget build(BuildContext context) {
    return Center(
        child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        ListenableBuilder(
            listenable: counterNotifier,
            builder: (context, child) {
              return Text('counter: ${counterNotifier.count}');
            }),
        TextButton(
          child: const Text('Increment'),
          onPressed: () {
            counterNotifier.increment();
          },
        ),
      ],
    ));
  }
}

ValueNotifierを使う

ValueNotifierはChangeNotifierをシンプルにしたものです。
その名の通り、1つの値を保持し、更新を通知できます。
使う側はChangeNotifierの時と同様ListenableBuilderも使うことができますが、
ValueListenableBuilderを使うとbuilder関数の引数で更新された値を直接受け取ることができます。

final ValueNotifier<int> counterNotifier = ValueNotifier(0);

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

  @override
  Widget build(BuildContext context) {
    return Center(
        child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        ValueListenableBuilder(
            valueListenable: counterNotifier,
            builder: (context, value, child) {
              return Text('counter: $value');
            }),
        TextButton(
          child: const Text('Increment'),
          onPressed: () {
            counterNotifier.value++;
          },
        ),
      ],
    ));
  }
}

アプリケーションアーキテクチャとしてMVVMを使う

これまでに、Stateの更新やWidgetへの通知の仕組みを見てきました。
これらの仕組みをMVVMに適用する例が載っていたのでご紹介します。

Model

まずはModel部分の定義です。
ModelはHTTP通信などのローレベルの処理を担当します。
Flutterに依存しないような作りにすることでモックへの差し替えがしやすく、テストしやすい作りになっています。

import 'package:http/http.dart';

class CounterData {
  CounterData(this.count);

  final int count;
}

class CounterModel {
  Future<CounterData> loadCountFromServer() async {
    final uri = Uri.parse('https://myfluttercounterapp.net/count');
    final response = await get(uri);

    if (response.statusCode != 200) {
      throw ('Failed to update resource');
    }

    return CounterData(int.parse(response.body));
  }

  Future<CounterData> updateCountOnServer(int newCount) async {
    // ...
  }
}

ViewModel

ChangeNotifierを継承したクラスをViewModelとして定義します。
Stateを内部に持ち、notifyListenersで通知します。
Viewからのイベントは increment メソッドを通じて実行します。
ガイドではViewModelはレストランのウェイターのようなものだと解説されています。
Modelがキッチン、Viewが顧客で、キッチンと顧客の間を仲介するのがViewModelです。
確かにレストランで顧客がキッチンと直接やりとりすることはないですよね。

import 'package:flutter/foundation.dart';

class CounterViewModel extends ChangeNotifier {
  final CounterModel model;
  int? count;
  String? errorMessage;
  CounterViewModel(this.model);

  Future<void> init() async {
    try {
      count = (await model.loadCountFromServer()).count;
    } catch (e) {
      errorMessage = 'Could not initialize counter';
    }
    notifyListeners();
  }

  Future<void> increment() async {
    var count = this.count;
    if (count == null) {
      throw('Not initialized');
    }
    try {
      await model.updateCountOnServer(count + 1);
      count++;
    } catch(e) {
      errorMessage = 'Count not update count';
    }
    notifyListeners();
  }
}

View

最後にViewです。
ViewModelはChangeNotifierなのでStateが更新された時にUIの更新も行うことができます。
Viewはレストランで言う顧客ですね。顧客がすることはなんでしょうか？
ウェイターに注文して（ViewModelへの依頼）、提供された料理を食べます（Stateを使ってUIを構築する）ね。

ListenableBuilder(
  listenable: viewModel,
  builder: (context, child) {
    return Column(
      children: [
        if (viewModel.errorMessage != null)
          Text(
            'Error: ${viewModel.errorMessage}',
            style: Theme.of(context)
                .textTheme
                .labelSmall
                ?.apply(color: Colors.red),
          ),
        Text('Count: ${viewModel.count}'),
        TextButton(
          onPressed: () {
            viewModel.increment();
          },
          child: Text('Increment'),
        ),
      ],
    );
  },
)

MVVMを適用することでViewはUIの構築だけを考えればよくなりました。
ViewModelはModelとViewの仲介役として機能し、ViewのためのStateを管理したり、Viewからイベントを受けとり、Modelを使ってデータの取得などを行います。
Modelは例ではHTTP通信などのローレベルな処理だけでしたが、アプリによってはビジネスロジックを担当する部分となります。

おわりに

First week experience of Flutter の State management を読んで、Flutterが標準で提供している状態管理の仕組みを理解しました。

実際のアプリケーション開発の現場ではRiverpodなどの状態管理パッケージを使うことが多いと思いますが、Flutterが標準で提供している状態管理の仕組みの理解が深まりました。

	タイプ	インスタンス化	extendsによる継承	implementsによる実装	その他
abstract	1	✖️	○	○	abstract関数を定義できる実装を持った関数も定義できる
base	1	○	○	✖️	左記の制限は自身が宣言されたライブラリ以外での制限
interface	1	○	✖️	○	左記の制限は自身が宣言されたライブラリ以外での制限
abstract かつ interface	1	✖️	✖️	○	左記の制限の「extendsによる継承の禁止」は自身が宣言されたライブラリ以外での制限実装を持たない純粋なインタフェースの定義に使う
final	1	○	✖️	✖️	左記の制限は自身が宣言されたライブラリ以外での制限
mixin class	2	✖️	✖️	○	左記の継承の制限は自身が宣言されたライブラリ以外での制限クラスなのでインスタンス化可能。 mixinなのでextendsが使えず、コンストラクタも持てない
sealed class	2	✖️	✖️	✖️	左記の継承と実装の制限は自身が宣言されたライブラリ以外での制限サブタイプをEnumのように扱える。自身が宣言されたライブラリ以外ではすべてのサブタイプ化を禁止する意味ではfinalと同じだが、クラス自身が暗黙的にabstract classになる。 switch文で全てのサブタイプが網羅されない場合はコンパイラが警告を出す。

サードパーティパッケージを使わずに状態を管理する

StatefulWidgetを使う

Widget間でStateを共有する

コンストラクタ引数でStateを渡す

InheritedWidgetを使う

コールバックで親ウィジェットにStateを渡す

状態管理をWidgetから切り離す

ChangeNotifierを使う

ValueNotifierを使う

アプリケーションアーキテクチャとしてMVVMを使う

Model

ViewModel

View

おわりに

第１章 環境構築

Flutter SDKのインストール

Xcodeのインストール

Android Studioのインストール

fvm

Android StudioでFlutterプロジェクトを作成

作成したプロジェクトをiOS, Androidで動かす

第2章 Dartの言語仕様

finalとconst

finalとconstの違い

遅延初期化

組み込み型

整数型

String

bool

List

Set

Map

Record

Object

dynamic

ジェネリクス

ジェネリッククラス

ジェネリック関数

演算子

比較演算子

カスケード記法

コレクションのオペレータ

制御構文

if-case文

switch文

ループ処理

パターン構文

一致判定

Listで分解宣言

Mapで分解宣言

Recordで分解宣言

Objectで分解宣言

パターンを補助する構文

例外処理

null安全

ライブラリと可視性

関数

省略可能引数

名前付き引数

関数の省略記法

第一級関数と匿名関数

クラス

初期化

ゲッタとセッタ

コンストラクタ種類

constantコンストラクタ

名前付きコンストラクタ

factoryコンストラクタ

クラス継承

スーパークラスのコンストラクタ

暗黙のインタフェース

拡張メソッド

mixin

Enum

クラス修飾子

タイプ1

タイプ2

まとめ

非同期処理

Future

第１章環境構築

第3章フレームワークの中心となるWidgetの実装体験

第4章アプリの日本語化対応、アセット管理、環境変数

第5章テーマとルーティング

第6章実施ハンズオン1 画像編集アプリを開発

第7章状態管理とRiverpod

第8章実施ハンズオン2 ひらがな変換アプリを開発

第9章フレームワークによるパフォーマンスの最適化

第10章高速で保守性の高いアプリを開発するためのコツ