モケラ

Tech Sheets

mokelab

Riverpodで下位ウィジェットから値を取得できるようにする(Provider)

最終更新日:2024-01-01

Riverpodを使うと下位ウィジェットから指定した値(オブジェクト)を取得することができます。リポジトリ等をとってこれるようにすると便利です。

Providerを作る

Provider でオブジェクトの作り方を指定します。

final accountRepositoryProvider = Provider<AccountRepository>((ref) {
  return AccountRepository();
});

ProviderScopeを追加する

ProviderScope を使ってスコープを指定します。リポジトリのようなアプリ全体でひとつだけあればいいようなオブジェクトであれば runApp() の位置で指定するとよいでしょう。

void main() {
  runApp(
    const ProviderScope(
      child: MyApp(),
    ),
  );
}

ConsumerWidgetを継承する

オブジェクトを使いたいウィジェットを StatelessWidget から ConsumerWidget に変更します。 build() の引数に WidgetRef も追加します。

class MainScreen extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    // refを使うコード
  }
}

refからオブジェクトを取得する

ref.read() を使って Provider で提供しているオブジェクトが取得できます。型情報があるので型安全に取得できます。

@override
Widget build(BuildContext context, WidgetRef ref) {
  final accountRepository = ref.read(accountRepositoryProvider);
}

一覧に戻る