🦁

Flutter useEffectとuseStateの使い方@初心者

2024/09/28に公開

Flutter useEffectとuseStateの使い方

最近Flutterの画面作成をしており、その過程で上記使用することが多くなった。
使用方が曖昧なので記事として残すことにした。筆者のチートシートである。

Flutterのflutter_hooksパッケージを利用

状態管理としてflutter_hooksを利用している。
https://pub.dev/packages/flutter_hooks

こちらのパッケージでないと利用できないので注意。

実際に記載してみる

例えば、
1.Test画面に遷移した際に一度だけ、モーダル(ダイアログ)を表示したい。
2.二度目以降は、表示しない様にする。

上記の様な実装をしたい。
すると下記の様なコードが出来上がる。

/// Test画面
class TestPage extends HookWidget {
  /// Constructor
  const TestPage({super.key});

  
  Widget build(BuildContext context) {
    /// モーダル表示可否 
    final modalShowed = useState<bool>(false); 
    // 初回時にモーダルを表示
    useEffect(
      () {
        if (!modalShowed.value) {
          // build終了後にモーダル表示するための処理
          WidgetsBinding.instance.addPostFrameCallback((_) {
            showModal(context);
          });
          // 一度表示されたらtureに変更
          modalShowed.value = true;
        }
        return null; /// 何もないならnullでOK
      },
      /// 変化対象を監視
      [modalShowed.value],
    );
    return Container( /// 以下略

useState とは?

useStateは、ウィジェット内で 状態(state) を管理するためのフック。
通常、状態を持つウィジェットを作るには StatefulWidget を使うが、HookWidgetとuseStateを使うと、状態管理がよりシンプル。

使い方:final 変数名 = useState<>(初期値);

変数名は、状態を保持するための変数。
型は、その変数のデータ型です(例えば、int、bool、String など)。
初期値は、状態の初期値。

  • 状態の値を取得・更新する方法:
    1.値を取得:変数名.value で現在の値を取得可能。
    2.値を更新:変数名.value = 新しい値 で状態を更新可能。

useEffect とは?

useEffect は、ウィジェットのライフサイクルに合わせて副作用(サイドエフェクト)を実行するためのフック。

副作用とは、例えばデータの取得、タイマーの開始、リスナーの登録など、ウィジェットのビルド(描画)の処理のことだとか。

使い方:

useEffect(() {
  // 第一引数: 実行したい副作用の処理
  return () {
    // クリーンアップ処理(オプション)or null
  };
 }, [第二引数:依存関係のリスト]
);

第一引数:実行したい副作用の処理を持つ関数。
この関数は、ウィジェットが初めてビルドされたときや、依存関係が変化したときに実行される。
戻り値として、クリーンアップ処理(不要になったときに実行する処理)を返すことができる。
(必要なければ null や何も返さなくてOK)

第二引数:副作用の実行タイミングを決めるための 依存関係のリスト。
このリストに含まれる変数が変化したときに、副作用の処理が再実行される。
リストが空の場合([])、副作用は最初のビルド時に一度だけ実行される。

処理内容

行いたいこととして、画面描写時に一度だけモーダルを表示する。

1.useStateでモーダルの表示可否をuseEffectで監視。
2.画面描写が終わったタイミングでモーダルを表示

WidgetsBinding.instance.addPostFrameCallback((_) {
  showModal(context);
});

3.useEffect内にて監視対象の値が変更される。
4.二度のモーダル表示はされなくなる。

となります。

useEffectのリストにある対象が変化するとuseEffect内の処理が再実行されるわけですね。
onPressでボタンおした際に、useEffectで指定した対象の変数が有る場合、処理が実行されるみたいな形でしょうか。

調べてみるとなるほどなですね。
これで脱useStateとuseeffect初心者かも?

Discussion