.familyについて学んでみた!

familyとは何か?

こちらが、公式のドキュメント

https://riverpod.dev/ja/docs/concepts/modifiers/family/
解説によると
.family 修飾子の目的は「外部のパラメータをもとに一意のプロバイダを作成すること」です。

といっても、こちらのドキュメントだけでは、理解できませんでした😵
こちらのAPI リファレンスにも書いてあったが、わかりずらかった😵
https://pub.dev/documentation/riverpod/latest/riverpod/FutureProvider-class.html

なので、動くソースコードを使って勉強してみた。
といっても、古いバージョンのソースコードを動くように、書き換えただけですが😅
どんなロジックかというと、enum(列挙型)で定数を作って、その中に4人のメンバーがいて、switch文でメンバーごとに年齢は何歳か戻り値を返すだけですね。
今回使ったのは、family constantというものですね。

API リファレンスによると

外部パラメーターから値を構築するプロバイダーのグループ。 ファミリーは、プロバイダーがアクセスできない値をプロバイダーに接続するのに役立ちます。

公式のドキュメントにも書かれていたのですが、idを取得するのに、使われていたりするようです。
https://pub.dev/documentation/riverpod/latest/riverpod/FutureProvider/family-constant.html

Widget型のListを作って、その中に、split methodを使って、文字列をpatternにマッチした箇所で分割し、部分文字列のリストを返します。
今回だと、最後のマッチの部分ですね。
この.split最近よく見かける気がする?
で、このコードなんですけど、forEachで書かないと、splitが設定した通りに機能してくれなかったですね!
C#とかPythonでコード書いていた時に、使うことがあってどんな役割があるか知らなくて、調べました😅

こちらが今回学習用に使ったコードです

Dartのsplitとは?
https://api.flutter.dev/flutter/dart-core/String/split.html

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

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

enum Member {
  kboy,
  kayboy,
  sayboy,
  jboy,
}

final familyAgeProvider = Provider.family<int, Member>((ref, member) {
  switch (member) {
    case Member.kboy:
      return 30;
    case Member.kayboy:
      return 20;
    case Member.sayboy:
      return 24;
    case Member.jboy:
      return 33;
    default:
      return 0;
  }
});

class MyApp extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    // Widget型の空のListを作る
    final children = <Widget>[];
    // forEachで書かないと、値をとってこれない?
    // for文では、数値が0になる?
    Member.values.forEach((member) {
      final name = member.toString().split('.').last;
      final age = ref.watch(familyAgeProvider(member));
      children.add(Text('$nameさんは、$age歳です.'));
    });

    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: children,
          ),
        ),
      ),
    );
  }
}

最後に

もっと、すごいのを作りたかったのですが.familyは、意外と難しかった!
なので、他のロジックを考えた時にまた記事を書こうかなと思います。