Zenn
📣

[Flutter]setStateをダイアログ内で使用するときの注意点とRiverpodの活用方法

2024/08/21に公開
Flutter
Riverpod
tech

目次

  1. 結論
  2. ダイアログは新しいコンテキストを作成する
  3. ダイアログ内でのsetStateの正しい使用方法
  4. Riverpodを使った状態管理
  5. 親ウィジェットの状態を更新する場合
  6. まとめ

結論

Flutterでダイアログ内の状態を適切に管理するためには、StatefulBuilderを使うか、より効果的な方法としてRiverpodを活用するのがおすすめです。
これにより、ダイアログ内のUI更新をスムーズに行い、アプリ全体の状態管理も一貫して行うことができます。

この記事では、setStateをダイアログ内で使う際の注意点と、Riverpodを使った実装方法について詳しく説明します。

1. ダイアログは新しいコンテキストを作成する

まず、ダイアログは通常、showDialog関数を使って表示します。
この関数は、画面全体にオーバーレイを作成し、新しいビルドコンテキストを生成します。
この新しいコンテキストは、ダイアログを表示する元のコンテキストとは別物です。そのため、setStateを使用しても、元のウィジェットの状態は更新されません。

showDialog(
  context: context,
  builder: (BuildContext context) {
    return AlertDialog(
      title: Text("Sample Dialog"),
      content: Text("This is a sample dialog."),
      actions: [
        TextButton(
          onPressed: () {
            // ダイアログを閉じる
            Navigator.of(context).pop();
          },
          child: Text("Close"),
        ),
      ],
    );
  },
);

上記の例では、AlertDialog内に表示する内容が定義されています。
しかし、ここでsetStateを使っても、ダイアログ内のUIは更新されません。
これは、ダイアログが別のコンテキストでレンダリングされているからです。

2. ダイアログ内でのsetStateの正しい使用方法

ダイアログ内で状態を更新する必要がある場合、StatefulBuilderウィジェットを使用すると便利です。
StatefulBuilderは、ローカルなsetState関数を提供し、その範囲内でのみ状態を管理できます。

以下に、StatefulBuilderを使った実際の例を示します。

showDialog(
  context: context,
  builder: (BuildContext context) {
    return StatefulBuilder(
      builder: (BuildContext context, StateSetter setState) {
        bool isChecked = false;
        return AlertDialog(
          title: Text("Checkbox Dialog"),
          content: CheckboxListTile(
            title: Text("Check me!"),
            value: isChecked,
            onChanged: (bool? value) {
              setState(() {
                isChecked = value ?? false;
              });
            },
          ),
          actions: [
            TextButton(
              onPressed: () {
                Navigator.of(context).pop();
              },
              child: Text("Close"),
            ),
          ],
        );
      },
    );
  },
);

このコードでは、StatefulBuilderの内部でsetStateを使用することで、ダイアログ内のチェックボックスの状態を適切に更新しています

3. Riverpodを使った状態管理

https://riverpod.dev/

Flutterでの状態管理をより効果的に行うために、Riverpodを利用することもできます。Riverpodは、グローバルな状態管理を簡潔に実装できるパッケージで、特にダイアログ内での状態管理でも強力です。

Riverpodとは？

Riverpodは、Flutterアプリケーションの状態管理を行うためのフレームワークです。Riverpodは、従来のProviderパッケージを改良したもので、以下のような利点があります:

  • 安全性: Riverpodは、すべてのプロバイダが依存関係の再計算や破棄のタイミングを管理できるように設計されています。
  • グローバルな状態管理: Riverpodを使用すると、アプリ全体で共有する状態を簡単に定義し、管理できます。
  • 依存性の注入: Riverpodは依存関係の注入が簡単で、テストやコードの再利用がしやすくなります。

公式ドキュメントによると、Riverpodは以下のような特徴を持っています:

  • コンパイル時の安全性: 誤った使い方があった場合、実行時ではなくコンパイル時にエラーが発生するように設計されています。
  • 遅延評価: 必要になったときにのみ状態を作成するため、リソースの効率的な利用が可能です。
  • 再利用性: ロジックを簡単に再利用できるため、複数のウィジェット間で状態を共有しやすくなっています。

Riverpodの基本的な使い方

Riverpodの基本的な使い方を理解するために、まずプロバイダを定義します。
StateProviderを使うことで、状態を保持するシンプルなプロバイダを作成できます。

final checkBoxProvider = StateProvider<bool>((ref) => false);

上記のコードは、bool型の状態を管理するためのStateProviderを作成しています。
このプロバイダは、falseを初期値として保持します。

次に、このプロバイダをダイアログ内で使用します。
Consumerウィジェットを使用すると、Providerによって管理されている状態を監視し、状態が変更されたときにUIを再構築することができます。

showDialog(
  context: context,
  builder: (BuildContext context) {
    return ProviderScope(
      child: Consumer(
        builder: (context, watch, _) {
          final isChecked = watch(checkBoxProvider).state;

          return AlertDialog(
            title: Text("Checkbox Dialog"),
            content: CheckboxListTile(
              title: Text("Check me!"),
              value: isChecked,
              onChanged: (bool? value) {
                context.read(checkBoxProvider).state = value ?? false;
              },
            ),
            actions: [
              TextButton(
                onPressed: () {
                  Navigator.of(context).pop();
                },
                child: Text("Close"),
              ),
            ],
          );
        },
      ),
    );
  },
);

この例では、Consumerウィジェットを使用してcheckBoxProviderを監視し、チェックボックスの状態に基づいてUIを動的に更新しています。
onChangedコールバックでは、context.readを使ってcheckBoxProviderの状態を更新します。

Riverpodを使う理由

Riverpodを使うことで、Flutterアプリの状態管理が非常にシンプルかつ強力になります。
以下の理由から、特にダイアログ内での状態管理に有効です。

  • コンテキストの混乱を防ぐ: RiverpodはBuildContextに依存しないため、ダイアログ内や非同期処理の中でも安全に状態を管理できます。
  • 可読性の向上: 状態管理が明確に分離されるため、コードの可読性が向上し、保守性も高まります。
  • スケーラビリティ: 小規模なアプリケーションから大規模なアプリケーションまで、同じアプローチで状態管理を行うことができるため、スケーラビリティにも優れています。

これらの特性により、RiverpodはFlutterの状態管理において強力な選択肢となります。
公式ドキュメントには、より詳細な使い方やサンプルコードが多数掲載されていますので、興味がある方はぜひ確認してみてください。
https://riverpod.dev/

4. 親ウィジェットの状態を更新する場合

Riverpodを使えば、ダイアログ内での状態変更を親ウィジェットに反映することも簡単です。
以下に、その実装例を示します。

void _showCustomDialog(BuildContext context, WidgetRef ref) {
  showDialog(
    context: context,
    builder: (BuildContext context) {
      return ProviderScope(
        child: Consumer(
          builder: (context, watch, _) {
            final isChecked = watch(checkBoxProvider).state;

            return AlertDialog(
              title: Text("Checkbox Dialog"),
              content: CheckboxListTile(
                title: Text("Check me!"),
                value: isChecked,
                onChanged: (bool? value) {
                  ref.read(checkBoxProvider).state = value ?? false;
                },
              ),
              actions: [
                TextButton(
                  onPressed: () {
                    Navigator.of(context).pop();
                  },
                  child: Text("Close"),
                ),
              ],
            );
          },
        ),
      );
    },
  );
}

このように、Riverpodを使用すると、状態管理が非常にシンプルかつ強力になります。
ダイアログ内での状態管理に加えて、アプリ全体の一貫性のある状態管理も容易に行えます。

まとめ

  • Flutterでダイアログ内のUIを更新する際は、setStateの使い方に注意が必要。
  • StatefulBuilderを使用することで、ダイアログ内の状態を正しく管理できるが、Riverpodを活用することで、よりモダンでスケーラブルな状態管理が可能になる。

Discussion