[Flutter]riverpod、state_notifier、freezedを使ってfirebaseのログイン実装

Flutterでnew projectを作成

シミュレータを起動させ、新しく作成されたものを

flutter run

で立ち上げると

こんな画面が出てきます。

firebaseの設定はこちらを参考にさせていただきました。

firebaseでプロジェクト作成

Sign in - Google Accounts

にアクセスしプロジェクト名を入力

ログイン方法設定

詳しくは上のyoutubeを見てください。

設定できたらpubspec.yamlを編集。

追加したものは、

firebase_core、firebase_auth、flutter_hooks、hooks_riverpod、state_notifier、freezed_annotation、freezed、build_runner

編集したら

pub get

でプロジェクトに反映させる

プロジェクトのlib内の構成は

こちらの記事の構成を参考にさせていただきました。

アプリが立ち上がると初めにmain.dartが呼ばれて、Firebase.initializeApp()でFirebaseとの接続が確立されるとroot.dartに行きます。root.dartでログイン情報を見て、ログインしているのであればhome_page.dartへ、ログインしていないのであればlogin_page.dartが呼ばれるようになっている。

Firebaseとアプリをつなぐ設定をしていない場合、main.dartの

if (snapshot.hasError) {
         return MaterialApp(
           title: 'login_sample',
           home: ErrorPage(),
         );
       }

ここの部分によってエラーページに飛びます。​

Firebaseとアプリの接続設定ができると

ログイン画面が表示されるようになります

こちらの記事でより詳細にコードを見ることができます。気になったらぜひご覧下さい。