👻

flutter_riverpodの使い方(初心者用)

2023/03/22に公開

Firebase

はじめに

flutterでriverpodを使用していますが、初心者の僕には中々理解しづらいのでチートシートを作成しました。

stateを利用して更新やリストで取得する方法を記載します。

主に自分がわからない部分を抜粋して記載しているので、所々抜けている部分があります。
参考にする場合は使えない部分が多々あると思うのでそこはご了承ください。
ただの僕用チートシートです。

また、firebaseも使用していたので、何かとモデルがあると便利なのでモデルも合わせて作成方法を記載

極論公式をしっかり確認が重要

パッケージインストール

最初にパッケージインストール
importで使用可能

 $ flutter pub add flutter_riverpod

 import 'package:flutter_riverpod/flutter_riverpod.dart';
 void main() {
  runApp(
    // Adding ProviderScope enables Riverpod for the entire project
    const ProviderScope(child: MyApp()),
  );
}

これでプロジェクトでriverpodを利用可能

YouDecideNameクラス作成

YouDecideNameクラス(テストクラス)を作成します。
今回はYouDecideNameのクラス名にします。
簡単に下記の様にします。

import 'dart:core';
import 'package:cloud_firestore/cloud_firestore.dart';
///➀
import 'package:freezed_annotation/freezed_annotation.dart';
///➁
part 'you_Decide_Name_data.freezed.dart';
part 'you_Decide_Name_data.g.dart';

///➂
@unfreezed
class YouDecideName with _$YouDecideName {
  factory YouDecideName({
    required String documentId,
    required String userName,
    required int userPoint,
    @TimestampConverter() required DateTime createDate,

  }) = _YouDecideName;
  factory YouDecideName.fromJson(Map<String, Object?> json) =>
      _$YouDecideNameFromJson(json);
}
///➃
class TimestampConverter implements JsonConverter<DateTime, Timestamp> {
  const TimestampConverter();
  @override
  DateTime fromJson(Timestamp json) => json.toDate();
  @override
  Timestamp toJson(DateTime object) => Timestamp.fromDate(object);
}

クラスで記載ある注意点部分説明

import 'package:freezed_annotation/freezed_annotation.dart';

➀ このクラスを作成する際には必要なので呪文と思って記載

part 'you_Decide_Name_data.freezed.dart';
part 'you_Decide_Name_data.g.dart';

➁このクラスを作成する際には必要なので呪文と思って記載
you_Decide_Nameに使用するファイル名と同じ名を記載
you_Decide_Name.dartなら上記の引用の様に記載

@unfreezed

➂ @unfreezedと＠freezedがあるのですが、DBに保存＆更新する場合にstateを利用して更新するなら、＠freezedだとstateの中身を変更出来ないのでここでは@unfreezedにしています

@TimestampConverter()

➃ flutter側ではDateTime、DB登録時はTimestampで登録する場合に使用するクラス
TimestampConverterはTimestampをDateTimeに変換する仕様
でないとJson変換できずエラーになる

Notifier作成１（更新）

ユーザー情報を更新したい時(userPoint)に使用するnotifier

class YouDecideNameRegisterNotifier extends StateNotifier<YouDecideName> {
  YouDecideNameRegisterNotifier(this.ref)
      : super(
      ///初期値
          YouDecideName(
              documentId:'',
	      userName:'',
	      userPoint:0,
	      createDate: DateTime.now(),
          ),
        );
  //final Ref ref;
 Future<void> updatePoint() async {
 final document = 'ユーザーのドキュメントID'
    final userCollection = await 
	FirebaseFirestore.instance
	.collection('user')
	.where('documentId', isEqualTo: document)
        .withConverter<YouDecideName>(
          fromFirestore: (snapshot, _) => YouDecideName.fromJson(snapshot.data()!),
          toFirestore: (user, _) => user.toJson(),
        )
        .get();
	
    //DBからとってきた値をstateに入れる
    state = userCollection;
    //userPointを0から→5000に変更
    state.userPoint = 5000;
    //更新処理
    await 
	FirebaseFirestore.instance
        .collection('user')
        .doc(document)
        .set(state.toJson());
	
  }
}

final youDecideNameRegisterProvider =
    StateNotifierProvider<YouDecideNameRegisterNotifier, YouDecideName>(
  YouDecideNameRegisterNotifier.new,
);

使用するときは下記の様に宣言する必要がある

ref.read(youDecideNameRegisterProvider.notifier).updatePoint();

Notifier作成２(リスト)

DBにあるユーザー情報をすべて取得して一覧表示したいときの場合

class YouDecideNameRegisterNotifier extends StateNotifier<List<YouDecideName>> {
  YouDecideNameRegisterNotifier(this.ref)
      : super([]);
      
  //final Ref ref;
 Future<void> docList() async {

    final userCollection = await 
	FirebaseFirestore.instance
	.collection('user')
        .withConverter<YouDecideName>(
          fromFirestore: (snapshot, _) => YouDecideName.fromJson(snapshot.data()!),
          toFirestore: (user, _) => user.toJson(),
        )
        .get();
	
  final list = userCollection.docs
  .map((YouDecideName) => YouDecideName.data())
  .toList();
   //取得したリストを代入
  state = list;
   	
  }
}
//youDecideNameRegisterProviderを書くのを忘れずに

上記の様にしてリストで取得してpageで利用
細かく書かずにほぼ乱文でかいてしまっているので、あまり参考にはしない様に。

これでStateNotifierProviderでの更新とリストの書き方でした。