RP: 使い方 - Ki-Kobayashi/flutter_wiki GitHub Wiki

🟩Riverpodの基本(設定が終わっている前提)

🟡 呼び出す種類

  • ref.watch: 見続ける
       👉 値が変化すると、その値に依存するウィジェットやプロバイダの更新
       👉 build関数で使用
       🛑 クリックイベント、ライフサイクル関数、非同期処理内での使用不可(バグの原因) 

  • ref.read: 一度限りの読み取り
       👉 その時点での値を取得(インスタンス取得にも利用可能)
       👉 クリックイベント、ライフサイクル関数、非同期処理内で利用
       🛑 build関数で使用不可(バグの原因)

  • ref.listen: 値が変化した時に何等かの処理を実行
       👉 build関数内 or Provider内 に定義する
       👉 ネットが未接続になった: ダイアログ表示
       👉 値が変化するたびに呼び出されるコールバック関数(画面遷移、ダイアログの表示など)を登録
       👉 エラー発生時に、スナックバーの表示など

.

🟡 ref.watch(xxxProvider)

final articleAsync = ref.watch(
        articleControllerProvider(articleId));
final articleController  = ref.watch(
        articleControllerProvider(articleId).notifier);
final articleDetailAsync  = ref.watch(
        articleControllerProvider(articleId)
            .select((state) => state.whenData((value) => value.articleDetail)));

.

🟡

.

🟡

.

🟡

🟩 Tips

参考:https://techblog.enechain.com/entry/flutter-rearchitecture-from-mvvm

.

🟡 画面単位で状態管理せず、アプリに必要な状態をグローバルに分割して定義

  🚨画面単位での状態管理: 複数の画面間で状態を共有する必要がでてきたときに黒魔術化しやすい
  💡グローバルに分割: 必要な場所で必要なものを購読することで、シンプルに状態を管理できる

.

🟡 Riverpod の場合はデフォルトで keepAlive=false

どこからも購読されていない Provider は自動でリソースが解放

.

🟡AsyncValue を返す Provider は、一度取得に成功/失敗すると、invalidate しても AsyncLoading 状態にはならない

下記の2つを満たす状態になる
isLoading = true
hasValue = true

.

📚【※補足※】isRefreshing

  • 初回読み込み時: false
  • 再読込時: true

hasValue のときにコンテンツを描画画させられる

class DetailPage extends ConsumerWidget {
  const DetailPage({
    super.key,
    required String itemId,
  }) : _itemId = itemId;

  final String _itemId;

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final isRefreshing = ref.watch(
      detailProvider(itemId: _itemId).select((item) => item.isRefreshing),
    );
    return Scaffold(
      appBar: AppBar(
          title: _Title(itemId: _itemId),
          bottom: isRefreshing
              ? const PreferredSize(
                  preferredSize: Size.fromHeight(1),
                  child: LinearProgressIndicator(),
                )
              : null),
      body: _Body(itemId: _itemId),
    );
  }
}

.

🟡

.

🟡

.

🟡

.

🟡

.

🟩

.

🟡

.

🟩

🟡

.

🟩

🟡

.

🟩

🟡

.

🟩

🟡

.

🟩

🟡

.

🟩

🟡

.

🟩

🟡

.