Flutter useEffectとuseStateの使い方@初心者
Flutter useEffectとuseStateの使い方
最近Flutterの画面作成をしており、その過程で上記使用することが多くなった。
使用方が曖昧なので記事として残すことにした。筆者のチートシートである。
Flutterのflutter_hooksパッケージを利用
状態管理として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