概要
どうも、@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
また、記事がとても役に立ったと思う人はコーヒーを奢っていただけると非常に嬉しいです！
コメント