Zenn
🦁

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

2024/09/28に公開
Flutter
hooks
useEffect
useState
tech

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});

  @override
  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