😎

Flutter(dart)でRiverPodのStateProviderを使う(初心者)

2023/03/23に公開

Flutter

はじめに

業務でflutter(dart)を使用。
stateProviderをどう使うねんっ！となったのでチートシートを作成しますた。

プログラミングやり始めた人にriverpodは難易度高いんじゃないの？！と思う今日この頃

筆者がコピペして記事を使える様にしてるので乱文です。

※記事内容指摘全然大丈夫です。
こちとらわからない事がわからないまま記事を書いてますので、
指摘あれば編集するかもしれません。

あくまで筆者宛てこの記事を書いているので外野の声は内容次第です。
それを承知したうえで内容確認してくださいなっ

まずは導入

公式をしっかり確認が一番重要

StateProvider

stateProviderはどこからでも使える変数のイメージ
導入さえしてしまえば、あとはpage内で使いたい場合にimportすれば使える

宣言方法

final testBoolProvider = StateProvider<bool>((ref) => false);
final testIntProvider = StateProvider<int>((ref) => 0);
final testStringProvider = StateProvider<String>((ref) => 'Hello');

適当なファイルを作成してそこにstateProviderを宣言
使いたいページにimportすること

使い方

watchとreadを使用

ref.watch(testBoolProvider);
ref.read(testBoolProvider.notifier).state = true;

変数みたいに使用する場合はwatch

値を変化させたい場合はreadを使う。その際に、notifierとstateを忘れずに。
また、readで使用する場合は何かアクションがある場合に使用すると〇。

例えば、ボタンを押して画面遷移時など。

onPressed: () {
//ここで使用
ref.read(testBoolProvider.notifier).state = true;
     Navigator.of(context).push(
         MaterialPageRoute<void>(
          builder: (context) => TestPage(),
                 ),
              );
           },

その他での使用

firebaseをつかうなら下記の様にして使うと〇。

final firebaseFirestoreProvider =
    Provider<FirebaseFirestore>((ref) => FirebaseFirestore.instance);

final firebaseStorageProvider =
    Provider<FirebaseStorage>((ref) => FirebaseStorage.instance);

使う時はreadとawaitで使うことを忘れずに。

以上

はじめに

まずは導入

StateProvider

使い方

その他での使用

Discussion