LoginSignup
8
0

More than 1 year has passed since last update.

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,
          ),
        ),
      ),
    );
  }
}
photo

最後に

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

8
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
0