簡単すぎない?FirebaseAuthとFlutterのStreamBuilderで認証前後の画面をコーディングしてみよう!

Dart

概要

どうも、@daiki1003です!

前回までで、Firebaseの登録から認証までを実装出来ました。

【超簡単!】FlutterでFirebaseを使って爆速コーディング!〜登録から認証まで〜
概要 みなさん、Firebase使ってますか? 「個人開発で何かを開発して世に出してみたい!」 って欲望のある人は確実に使った方が良いと思います。 めちゃくちゃ便利ですよ。 チーム開発した事がある人はすごさわかると...
7分で出来た!FlutterでFirebase Authパッケージを使って認証を超簡単実装!
概要 どうも、@daiki1003です。 (目次、すごい長いですがほぼ画像なんで一瞬ですよ!笑) 本記事では、FlutterでFirebaseにおける認証を、 firebase_authパッケージを使って実装するところまで解...

ここまで出来ると、


「今度は認証が済んでるかどうかで表示するビューを変更したい」

と言う欲に駆られますよね。
うん、自然な事だと思います。

なので、今回の記事ではFlutterが用意してくれている
StreamBuilderを使ってそんな実装をしてみたいと思います!

サンプルコード

例によって、今回のコードはgithubにありますので興味のある方はダウンロードしてみてください。

GitHub - daiki1003/firebase_sample: This is firebase sample created with flutter.
This is firebase sample created with flutter. Contribute to daiki1003/firebase_sample development by creating an account on GitHub.

それでは、解説に行ってみましょー!

FlutterのStreamBuilderについて

Streamってそもそも何?

まず、Streamとは何なんでしょう?

直訳すると、「流れ」です。
では、何の流れなのか?

データの流れ、変更です。

どうでしょう?
今は、なんとなくわかったかも?くらいで大丈夫です👍

StreamBuilderって何?

では、次に今回使うFlutterのStreamBuilderとは何なのか?

言葉だけで説明するのであれば、

Streamに合わせてリビルドされるウィジェット、つまり、

データの流れ、変更に合わせてリビルドされるウィジェット

と言うことです。
少しお分かりいただけたでしょうか?
まだあんまりかもですね。

では、実例を使ってもっと解説したいと思います!

FlutterのStreamBuilderってどうやって使うの?

今回作りたい動作の整理

今回の記事では、以下の様な動作をするアプリを考えてみます。

【登場画面】
・新規登録/ログイン画面 (AuthScreen)
・ログイン後画面、ログアウト出来る (SomeScreen)

【簡単な仕様】
・起動後、ログイン情報がなければAuthScreenを表示
・ログイン情報があればSomeScreenを表示
・ログアウトしたらAuthScreenを再度表示

です。

では、実装していきましょう。

StreamBuilderの使い方

StreamBuilder class - widgets library - Dart API
API docs for the StreamBuilder class from the widgets library, for the Dart programming language.

StreamBuilder の主なインタフェースはこちらです。

StreamBuilder(stream: Stream<dynamic> 
              builder: Widget Function(BuildContext, AsyncSnapshot<dynamic>)

StreamBuilder のstream引数にはStream<T>を渡してあげます。
そうすると、 StreamBuilder はTの値が変わる度にbuilder引数の関数を実行します。
そして返却されたWidgetを描画する、と言う流れになります。

ここからは実際の例、コードを通してみていきます。

main.dart一部抜粋

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // titleとかthemeとか...
      home: StreamBuilder(
        stream: FirebaseAuth.instance.onAuthStateChanged,
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return Center(child: CircularProgressIndicator());
          }

          if (snapshot.hasData) {
            return SomeScreen();
          }
          return AuthScreen();
        },
      ),
    );
  }
}

さぁ、大体の使い方はわかっていただけましたでしょうか?

今回、streamに渡しているのは

FirebaseAuth.instance.onAuthStateChanged

です。

プロパティ名が指し示している様に、
onAuthStateChangedはAuthStateつまりログイン状態のStreamを返します。
ログイン状態が変更される、つまりログイン/ログアウトの度にbuilderに渡された引数が実行されます。

if (snapshot.connectionState == ConnectionState.waiting) {
  return Center(child: CircularProgressIndicator());
}

アプリ起動の直後は、ログイン状態を取得したりするためFirebaseAuth自体も
状態をすぐに理解することはできません。

そんな状態の時は、画面中央に良くあるローディング表示をします。

ですが、ほとんどの場合この表示は本当に一瞬です。

if (snapshot.hasData) {
  return SomeScreen();
}
return AuthScreen();

その後、 snapshot.hasData つまりログイン情報を
持っている場合はSomeScreenを、
持っていない場合はAuthScreenを表示する、と言う実装になっています。

さいごに

いかがでしたでしょうか?
今までFirebaseに関して、3つ記事を書いてきましたが、
これらを組み合わせれば慣れて仕舞えば15分くらいでログイン/ログアウトは実装終わってしまうと思います。

次回は、Firebaseログインは様々な種類がありますので
それを取り上げて説明していきたいと思います。

誰かのお役に立てば。

Twitterフォローお願いします

「次回以降も記事を読んでみたい!」
「この辺分からなかったから質問したい!」

そんな時は、是非Twitter (@daiki1003)Instagram (@ashdik_flutter)のフォローお願いします♪

Twitterコミュニティ参加お願いします

Twitterコミュニティ「Flutter lovers」を開設しました!
参加お待ちしております😁

☕️ Buy me a coffee

また、記事がとても役に立ったと思う人は
コーヒーを奢っていただけると非常に嬉しいです!

コメント

タイトルとURLをコピーしました