RiverpodのStreamProviderを使用してRealtimeDatabaseから値を取得

概要

RiverpodのStreamProviderによってRealtimeDatabaseを監視し、変更があれば即座に画面に反映する。

模擬店システムに使用した例：

手順

1. StreamProviderのインスタンスを作成

import 'package:firebase_database/firebase_database.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';

final myDataProvider = StreamProvider<DatabaseEvent>((ref) async* {
    yield* FirebaseDatabase.instance
          .ref("/* 取得したいデータのパスを指定 */")
          .onValue;
});

2. HookConsumerWidgetを継承したクラスを宣言

class MyPage extends HookConsumerWidget {
  const MyPage({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Container();
  }
}

3. ref.watch()を使用してProviderからAsyncValueを取得

@override
Widget build(BuildContext context, WidgetRef ref) {
  //変更を監視
  final myDataAsyncVal = ref.watch(myDataProvider);

  return Container();
}

4. asyncVal変数.when()を返り値に割り当てる

@override
Widget build(BuildContext context, WidgetRef ref) {
    //変更を監視
    final myDataAsyncVal = ref.watch(myDataProvider);
    
    return myDataAsyncVal.when(
        loading: () => const CircularProgressIndicator(), //ロード時の処理
        error: (error, stackTrace) => Text(error.toString()), //エラー時の処理
        data: (event) { //正常に取得できた時の処理
          return Container();
        }
    );
}

5. 仮引数eventを使用してDBからデータを取得

@override
Widget build(BuildContext context, WidgetRef ref) {
//変更を監視
final myDataAsyncVal = ref.watch(myDataProvider);

return myDataAsyncVal.when(
    loading: () => const CircularProgressIndicator(), //ロード時の処理
    error: (error, stackTrace) => Text(error.toString()), //エラー時の処理
    data: (event) { //正常に取得できた時の処理
      //ここは取得したいデータの型によって対応を変える
      final String myData = event.snapshot.value.toString();
      return Text(myData);
    }
);
}

参考