😵‍💫

ProviderとRiverpodについて

2023/07/19に公開

Flutter

Dart

tech

そもそもProviderとRiverpodって

Providerはアプリのウィジェットからビジネスロジックを分離するための簡単で、手間のかからない方法を提供してくれます。これはInheritedWidgetクラスに基づいているため、ビジネスロジックの再利用やリファクタリングも簡単になります。UIから状態を分離するというのは、Providerが解決する主要な問題の一つです。

引用元

Riverpodは、Flutterで使用できる「状態管理ライブラリ」のことです。なので、RiverpodはProviderの上位互換といってもよいかもしれません。

Hello World

rierpod をインストールしたら次のコードを実行します。
実行すると「Hello world」が画面に表示されます。

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

// 値（ここでは "Hello world"）を格納する「プロバイダ」を作成します。
// プロバイダを使うことで値のモックやオーバーライドが可能になります。
final helloWorldProvider = Provider((_) => 'Hello Provider');

void main() {
  runApp(
    // プロバイダをウィジェットで利用するには、アプリ全体を
    // `ProviderScope` ウィジェットで囲む必要があります。
    // ここに各プロバイダのステート（状態）・値が格納されていきます。
    ProviderScope(
      child: HelloProvider(),
    ),
  );
}

// StatelessWidget の代わりに Riverpod の ConsumerWidget を継承します。
class HelloProvider extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final String value = ref.watch(helloWorldProvider);

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Hellow Provider')),
        body: Center(
          child: Text(value),
        ),
      ),
    );
  }

Riverpod Gneratorを使ってみる

今度はriverpod_generatorを使ってみます。
riverpod_generatorはアノテーションをつけるだけで、providerを生成してくれるものです。

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

//この時点ではエラーが出てOK
//dart pub run build_runner watchを実行するとmain.g.dartが生成される
part 'main.g.dart';
@riverpod
String label(LabelRef ref) => 'こんにちは プロバイダー';

void main() {
  runApp(
    // プロバイダをウィジェットで利用するには、アプリ全体を
    // `ProviderScope` ウィジェットで囲む必要があります。
    // ここに各プロバイダのステート（状態）・値が格納されていきます。
    ProviderScope(
      child: HelloProvider(),
    ),
  );
}

// StatelessWidget の代わりに Riverpod の ConsumerWidget を継承します。
class HelloProvider extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final String value = ref.watch(labelProvider);

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Hellow Provider')),
        body: Center(
          child: Text(value),
        ),
      ),
    );
  }
}

build_runnner をイントールします。

dart pub run build_runner watchを実行するとmain.g.dart
を実行すると、main.g.dartというファイルが実行され、「こんにちは　プロバイダー」という文字が画面に表示されます。

コマンド

dart run build_runner <command>

利用可能なコマンドは build, watch, serve, test です。

build：単一のビルドを実行して終了します。
watch：ファイルシステムの編集を監視し、必要に応じてリビルドを行う永続的なビルドサーバーを実行します。
serve： watchと同じですが、開発サーバーも実行します。
デフォルトでは、webディレクトリとtestディレクトリをそれぞれ8080番と8081番ポートで提供します。
test：単一のビルドを実行し、マージされた出力ディレクトリを作成し、dart run test --precompiled <merged-output-dir> を実行します。
引用元

さいごに

今回は、画面に文字を表示するだけでしたが、なんとなくProviderやriverpod_generatorの使い方のイメージが持てたでしょうか。

私は初心者のためまだまだ勉強して、アップデートしていきます...。

そもそもProviderとRiverpodって

Hello World

Riverpod Gneratorを使ってみる

さいごに

Discussion