Udemyセール開催中! 対象コースが1,220円から

【Flutter×Riverpod】.familyの使い方|プロバイダ修飾子を理解する

今回はRiverpodのプロバイダ修飾子「.family」の使い方を紹介します。

目次

プロバイダ修飾子「.family」とは?

プロバイダ作成時にプロバイダ修飾子(Modifier)「.family」を使用することで外部からプロバイダを取得する際、外部データを渡してプロバイダの処理で使用することができます。

.familyでプロバイダを定義

//定義
final プロバイダ名 = 
  プロバイダ.family<ステートの型, 外部パラメータの型>((ref, 外部パラメータ) => 処理...);

//例
final helloProvider = 
  Provider.family<String, String>((ref, name) => 'Hello! $name');

上記コードのように「.family」を使用することで、プロバイダの第二引数に外部データ受け取るパラメータを作ることができます。今回の「helloProvider」ではString型のパラメータを外部から取得できます。

.familyを使用したプロバイダを取得する

//.familyなし
final hello = ref.watch(helloProvider);

//.familyあり
final hello = ref.watch(helloProvider('Riverpod'));

上記コードのように「.family」を使用したプロバイダを取得するには、プロバイダ作成時に定義した型のパラメータを渡します。今回の場合String型の「Riverpod」を渡しています。

//ソース
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

final helloProvider =
    Provider.family<String, String>((ref, name) => 'Hello! $name');

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

class MyApp extends ConsumerWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final hello = ref.watch(helloProvider('Riverpod'));

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Riverpod'),
        ),
        body: Center(
          child: Text(
            hello.toString(),
            style: TextStyle(
              fontSize: 30,
            ),
          ),
        ),
      ),
    );
  }
}

以上です。

参考

Riverpod:.family

  • URLをコピーしました!
目次
閉じる