くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

トップ > Flutter > flutter_hooksのuseEffectで一度だけ処理をする

flutter_hooksのuseEffectで一度だけ処理をする

Flutter flutter_hooks

画面を開いたときに、初期化処理などをしたいと思って、
いろいろ調べたときの備忘録(*´ω｀*)

flutter_hooksのuseEffectを使うとよいっぽい。

コード

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';

class FooPage extends HookConsumerWidget {
  const FooPage({super.key});
  
  @override
  Widget build(BuildContext context, WidgetRef ref) {

    useEffect(() {
      // 1度だけ実行したい処理
      WidgetsBinding.instance.addPostFrameCallback((_) {
        // build完了後に呼び出し
        ref.read(myProvider.notifier).init();
      });
      return null;
    }, const []);

    return // ...
  }
}

useEffectの型はこんな感じ。

void useEffect(
  Dispose? effect(),    // 変更されたら実行する関数
  [List<Object?>? keys] // 変更を監視する対象
)

keysにconst []を渡すことで、
最初の1度だけ実行されるようにできる。
(const []は変更がないため。)

また、WidgetsBinding.instance.addPostFrameCallbackは、
frameの終わり(build完了後)に呼び出したい処理を設定できる。

これがないと、処理によっては、エラーになること場合がある。

以上!! Nuxtのmontedっぽいのはこう書くのか。。(´ω｀)

参考にしたサイトさま