RP：導入 基本設定 - Ki-Kobayashi/flutter_wiki GitHub Wiki

🟩公式ページ

https://riverpod.dev/ja/docs/introduction/getting_started

.

🟩 STEP_0: Flutter Riverpod Snippetsプラグイン導入

image

.

🟡 使い方

「riverpod~」と入力すると、snippetsが表示される

.

  • consumer : 👉　Consumer ウィジェットを作成します。
  • stlessConsumer : 👉　ConsumerStateless ウィジェットを作成します。
  • stfulConsumer : 👉　コンシューマー・ステートフル・ウィジェットを作成する
  • stlessHookConsumer : 👉　ステートレスな HookConsumer ウィジェットを作成します。
  • stfulHookConsumer : 👉　ステートフルな HookConsumer ウィジェットを作成する

.

  • riverpodClass : 👉　クラス・プロバイダを作成します。
  • riverpodClassKeepAlive : 👉　クラス・プロバイダを作成します。
  • riverpodAsyncClass : 👉　非同期クラス・プロバイダを作成します。
  • riverpodAsyncClassKeepAlive : 👉　非同期クラス・プロバイダを作成します。
  • riverpodStreamClass : 👉　ストリーム・クラス・プロバイダを作成します。
  • riverpodStreamClassKeepAlive : 👉　生存するストリーム・クラス・プロバイダを作成します
  • RiverpodPart : 👉　Riverpod 用パート文の作成

.

  • listen : 👉　プロバイダの Listenable を作成します。
  • riverpod : 👉　シンプルなプロバイダを作成します
  • riverpodKeepAlive : 👉　シンプルなキープアライブ・プロバイダの作成
  • FutureProvider : 👉　を作成します。
  • riverpodFutureKeepAlive : 👉　キープアライブ FutureProvider を作成します。
  • riverpodStreamStreamProvider : 👉　を作成します。
  • riverpodStreamKeepAlive : 👉　キープアライブStreamProviderを作成します

.

  • provider : 👉　シンプルな riverpod プロバイダを作成します
  • providerFamily : 👉　ファミリ修飾子を持つプロバイダを作成します。

.

  • futureProvider : 👉　FutureProvider を作成します。
  • futureProviderFamily : 👉　ファミリ修飾子を持つ FutureProvider を作成します。

. .

  • streamProvider : 👉　 StreamProvider を作成します。
  • futureProviderFamily : 👉　Family修飾子を持つ StreamProvider を作成します。

.

  • ChangeNotifierProvider : 👉　ChangeNotifierProvider を作成します。
  • changeNotifierProviderFamily : 👉　ファミリー修飾子を持つ ChangeNotifierProvider を作成します。

.

  • stateProvider : 👉　StateProvider を作成します。
  • stateProviderFamily : 👉　ファミリ修飾子を持つ StateProvider を作成します。

.

  • stateNotifierProvider : 👉　StateNotifier プロバイダを作成します。
  • stateNotifierProviderFamily : 👉　ファミリ修飾子を持つ StateNotifierProvider を作成します。
  • stateNotifier : 👉　StateNotifier を継承し、型を編集できるクラスを作成します。

.

  • AsyncNotifierProvider : 👉　AsyncNotifierProvider を作成します。
  • asyncNotifierProviderFamily : 👉　ファミリー修飾子を持つ AsyncNotifierProvider を作成します。
  • asyncNotifier : 👉　AsyncNotifier クラスを作成します。
  • asyncNotifierFamily : 👉　ファミリー・パラメータを持つ AsyncNotifier の作成

.

  • notifierProvider : 👉　NotifierProviderを作成します。
  • notifierProviderFamily : 👉　ファミリ修飾子を持つ NotifierProvider を作成します。
  • notifier : 👉　Notifierクラスを作成します。
  • notifierFamily : 👉　Family パラメータを持つ Notifier を作成します。

.

  • streamNotifierProvider : 👉　StreamNotifierProvider を作成します。
  • streamNotifierProviderFamily : 👉　Family 修飾子を持つ StreamNotifierProvider を作成します。
  • streamNotifier : 👉　StreamNotifierクラスを作成します。
  • streamNotifierFamily : 👉　ファミリー・パラメータを持つ StreamNotifier を作成します。

.

🟩 STEP_0: 必要パッケージの導入

【pubdev】より下記追加

🟡 pubspec.yaml

以下は、riverpod と flutter_hooksの 2つ を利用する場合の例

fvm flutter pub add \
hooks_riverpod \
riverpod_annotation \
dev:riverpod_generator \
dev:build_runner \
dev:custom_lint \
dev:riverpod_lint
dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^1.0.2
  freezed_annotation: ^2.4.1
  json_annotation: ^4.8.1
  flutter_hooks: ^0.20.1  👈追加
  hooks_riverpod: ^2.4.0  👈追加
  riverpod_annotation: ^2.1.5    👈追加
  
 ・・・

dev_dependencies:
  flutter_test:
    sdk: flutter

  flutter_lints: ^2.0.0
  freezed: ^2.4.1
  json_serializable: ^6.7.1
  build_runner: ^2.4.6
  riverpod_generator: ^2.3.2  👈追加
  riverpod_lint: ^2.1.0  👈追加
  custom_lint: ^0.5.3  👈追加
　・・・

💎追加コマンド参考

.

flutter pub add 【dependenciesに追加したいパッケージ名】
flutter pub add dev:【**dev_**dependenciesに追加したいパッケージ名】

.

🟡 analysis_options.yaml に以下追加

analyzer:
  plugins:
    - custom_lint 👈 riverpod_lintを有効にする
  exclude:
    - "**/*.g.dart"
    - "**/*.freezed.dart"
  errors:
    invalid_annotation_target: ignore　👈freezedが生成したコードを除外し、warningだらけを防ぐ（※json_serializable　未使用なら、不要）

.

🟩 STEP_1: MyApp を ProviderScopeで囲う

import 'application.dart';

// 全APIをJson取得にするか
bool isRelease = false;
// 個別にAPIをJson取得（ isRelease が　false　であること）
bool isDevSample = true;

Future<void> main() async {
  // // 初期化が完了するまでSplash表示
  // WidgetsBinding widgetsBinding = WidgetsFlutterBinding.ensureInitialized();
  // FlutterNativeSplash.preserve(widgetsBinding: widgetsBinding);

  // 💡 `runApp` 関数が終わる前に何か処理を実行する場合は `ensureInitialized()` メソッドを追記する必要がある（provider の override を使用するなど）
  WidgetsFlutterBinding.ensureInitialized();

  // 💡アプリを縦画面のみする（画面回転なし）
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.portraitUp,
  ]);

  // google fontsの設定
  GoogleFonts.config.allowRuntimeFetching = kDebugMode;
  // 〇日前表示設定
  timeago.setLocaleMessages("ja", timeago.JaMessages());

  // TODO:検証完了後に以下&関連変数を削除
  if (isRelease) {
    isDevSample = false;
  }

  // 初期化完了後Splash終了
  // FlutterNativeSplash.remove();

  runApp(
    ProviderScope( 👈　ここを追加
      overrides: [
        // 💡SharedPreferences のインスタンス取得は非同期です。
　　　　//    SharedPreferences を使いたいとき、毎回非同期でインスタンスを取得せずに使用するためにも、 Provider を使ってインスタンスをキャッシュ 
        // https://riverpod.dev/ja/docs/concepts/scopes#initialization-of-synchronous-provider-for-async-apis
        sharedPreferencesProvider.overrideWithValue(
          await SharedPreferences.getInstance(),
        ),
        // 
        flutterSecureStorageProvider.overrideWithValue(
          const FlutterSecureStorage(),
        ),
        // TODO:リリース時は、stub用を見ないよう「isDev～」の分岐削除（RestClientのみにする）
        // サンプルデータソース
        xxxDataSourceProvider.overrideWith((ref) => ref.watch(isDevSample
            ? stubXxxDataSourceProvider
            : xxxRestClientProvider)),
      ],
      child: const Application(),
    ),
  );
}

.

🟩 Freezedは、「Dto（Request / Response）」「状態管理するためのモデル（State）」の作成に使用できる

  • APIのDTOは通常、変更されないことが望ましい。
    　　👉 Freezedを使用することで、生成されたクラスは不変で再代入不可能なものとなり、意図しない変更が防げられる

  • FreezedはEquatableの機能を提供しており、等価性の確認が容易。
    　　👉これは、APIのResponseオブジェクトなどで特に重要

🟡【例】

  • APIの DTO (Request, Response) を作成する場合
    　　　👉　Keyが変数名と異なるときは、「@JsonKey(name: 'xxx_xxx')」を使用する
    　　　👉　APIのレスポンスが一部の情報を含まない場合：フィールドが存在しない場合でもエラーが発生せず、デフォルト値が利用

  • Riverpodで管理する State 作成する場合
    　　　👉　データがないとき用に、**「@Default('')」**を使用する

  • Dto 兼 Riverpodで管理する State 作成する場合
    　　　👉　データがないとき用に、**「@JsonKey(name: 'xxx_xxx')」&「@Default('')」**を使用する

import 'package:freezed_annotation/freezed_annotation.dart';

part 'article.freezed.dart';
part 'article.g.dart';

@freezed
class Article with _$Article {
  const factory Article({
    @Default('') @JsonKey(name: 'article_id') String articleId,
    @Default('') String published,
    @Default('') String title,
    @Default('') String description,
    @Default('') @JsonKey(name: 'image_alt') String imageAlt,
    @Default('') String category,
    @Default('') @JsonKey(name: 'src_url') String srcUrl,
  }) = _Article;

  factory Article.fromJson(Map<String, dynamic> json) =>
      _$ArticleFromJson(json);
}

.

🟩

🟡



.


🟩


🟡




.


🟩


🟡




.


🟩


🟡




.


🟩


🟡




.


🟩


🟡




.


              


              

                

                  

                    

                  

                

              

           
⚠️ **GitHub.com Fallback** ⚠️