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

Dart

概要

どうも、@daiki1003です!

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

【超簡単!】FlutterでFirebaseを使って爆速コーディング!〜登録から認証まで〜
概要 みなさん、Firebase使ってますか? 「個人開発で何かを開発して世に出してみたい!」 って欲望のある人は確実に使った方が良いと思います。 めちゃくちゃ便利ですよ。 チーム開発した事がある人はすごさわかると...
7分で出来た!FlutterでFirebase Authパッケージを使って認証を超簡単実装!
Firebaseの導入で悩んでいませんか? この記事では、firebase_authパッケージを使って認証するところまでを図をたっぷり使って解説しています。 是非ご覧ください♪

ここまで出来ると、


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

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

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

サンプルコード

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

daiki1003/firebase_sample
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フォローお願いします

毎日技術ブログを更新しています。

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

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

コメント

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