概要
どうも、@daiki1003です!
前回までで、Firebaseの登録から認証までを実装出来ました。
ここまで出来ると、
「今度は認証が済んでるかどうかで表示するビューを変更したい」
と言う欲に駆られますよね。
うん、自然な事だと思います。
なので、今回の記事ではFlutterが用意してくれている
StreamBuilderを使ってそんな実装をしてみたいと思います!
サンプルコード
例によって、今回のコードはgithubにありますので興味のある方はダウンロードしてみてください。
それでは、解説に行ってみましょー!
FlutterのStreamBuilderについて
Streamってそもそも何?
まず、Streamとは何なんでしょう?
直訳すると、「流れ」です。
では、何の流れなのか?
データの流れ、変更です。
…
どうでしょう?
今は、なんとなくわかったかも?くらいで大丈夫です👍
StreamBuilderって何?
では、次に今回使うFlutterのStreamBuilderとは何なのか?
言葉だけで説明するのであれば、
Streamに合わせてリビルドされるウィジェット、つまり、
データの流れ、変更に合わせてリビルドされるウィジェット
と言うことです。
少しお分かりいただけたでしょうか?
まだあんまりかもですね。
では、実例を使ってもっと解説したいと思います!
FlutterのStreamBuilderってどうやって使うの?今回作りたい動作の整理
今回の記事では、以下の様な動作をするアプリを考えてみます。
【登場画面】
・新規登録/ログイン画面 (AuthScreen)
・ログイン後画面、ログアウト出来る (SomeScreen)
【簡単な仕様】
・起動後、ログイン情報がなければAuthScreenを表示
・ログイン情報があればSomeScreenを表示
・ログアウトしたらAuthScreenを再度表示
です。
では、実装していきましょう。
StreamBuilderの使い方
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
また、記事がとても役に立ったと思う人はコーヒーを奢っていただけると非常に嬉しいです!
コメント