[firebaseAuth✖️flutter✖️MVVM]ログイン結果をしらせるsnackBarを表示する

どうも１
初心者flutterプログラマーのちゃきです！
今回は、新規登録・ログインの結果を知らせるsnackBarを作っていきます💪

MVVM型で、
Model → 処理結果をString型で作成する
ViewModel → Modelでえた処理結果をViewに返す
View → showSnackBarで処理結果を表示する
の構造で作っていきます

Model(処理結果をString型で作成)

新規登録もログインも同じ方法で、処理の結果をString型で返します。

  //⭐️新規登録⭐️
  Future<String> createUser({
    required email,
    required password,
  }) async {
    try {
      await FirebaseAuth.instance.createUserWithEmailAndPassword(
        email: email,
        password: password,
      );
      state = FirebaseAuth.instance.currentUser!;
      return 'success'; //①処理がうまくいった場合、successを返す
    } on FirebaseAuthException catch (e) {
      return e.toString(); //②firebaseAuthのエラーがあった場合、errorをString型にして返す。
    } catch (e) {
      return e.toString(); //③その他のエラーがあった場合、errorをString型にして返す
    }
  }

  //⭐️ログイン⭐️
  Future<String> signIn({
    required email,
    required password,
  }) async {
    try {
      await FirebaseAuth.instance.signInWithEmailAndPassword(
        email: email,
        password: password,
      );
      state = FirebaseAuth.instance.currentUser!;
      return 'success';
    } on FirebaseAuthException catch (e) {
      return e.toString();
    } catch (e) {
      return e.toString();
    }
  }

ViewModel(Modelの結果をViewに渡す)

Modelから受け取った処理の結果を、viewに返します。

  Future<String> createUser({
    required email,
    required password,
  }) async {
    state = const AsyncLoading();
    final result = await ref.read(authModelProvider.notifier).createUser(
          email: email,
          password: password,
        );
    state = const AsyncData(null);
    return result;
  }

  //サインイン
  Future<String> signIn({
    required email,
    required password,
  }) async {
    state = const AsyncLoading();
    final result = await ref.read(authModelProvider.notifier).signIn(
          email: email,
          password: password,
        );
    state = const AsyncData(null);
    return result;
  }

View(showSnackBarで処理結果を画面上に表示)

ViewModelから受け取った結果を、スナックバーにしてユーザーに画面上で知らせます。

    //⭐️新規登録⭐️
            ElevatedButton(
              onPressed: () async {
                //１、新規登録の結果を受け取る
                final String result =
                    await ref.read(authViewModelProvider.notifier).createUser(
                          email: emailController.text,
                          password: passController.text,
                        );
                //２、resultを表示するスナックバーを定義する。

                final snackBar = SnackBar(content: Text(result));
                //３、contextがうまくいっていないときは処理を終了する
                if (!context.mounted) {
                  return;
                }
                //４、resultを表示するスナックバーを走らせる。
                ScaffoldMessenger.of(context).showSnackBar(snackBar);
              },
              child: const Text('新規登録'),
            ),
       //⭐️ログイン⭐️
            ElevatedButton(
              onPressed: () async {
                final result =
                    await ref.read(authViewModelProvider.notifier).signIn(
                          email: emailController.text,
                          password: passController.text,
                        );
                final snackBar = SnackBar(content: Text(result));
                if (!context.mounted) {
                  return;
                }
                ScaffoldMessenger.of(context).showSnackBar(snackBar);
              },
              child: const Text('ログイン'),
            ),

おわりに

ここまで読んでくださってありがとうございました✨✨
明日はfirebaseAuthのまとめ記事を投稿するので、もしご興味あれば見に来てください！