Flutterでfirebase+Blocなアプリケーションを作る（その１）
やること
Flutter入門としてサンプルを使ったデモアプリを作成します。
はじめに
Flutterとは
Googleが開発するクロスプラットフォームなモバイルアプリケーションSDK です。
iOS、Androidに対応していましたが、2019年5月にウェブ版のFlutter for Web（旧 hummingbird）が正式発表されました。
他のクロスプラットフォームとの大きな違いとして、独自のレンダリングエンジンを使用してUIを構築することが挙げられます。
このためiOS、Android間でも同じようなUIを構成することができます。
これまでのクラスプラットフォームの経験としてはCordova、期待しているのはNativeScript or Flutterですが、それぞれ比較してみると
- vs Cordova: WebViewを挟まず独自レンダリングできるのでパフォーマンスが良い。 というかもうCordovaは使いたくない :P
- vs NativeScript: UIを揃えられる分、プラグイン周りはObjective-C, Javaでのコーディングが必要になる（自作する場合）。あとまだプレビュー版ですがFlutterではウェブ版も作れる。
Blocとは
Bloc(Business Logic Component)の意味でGoogle Adwardsチームが発表したデザインパターンです。
ビジネスロジックをプレゼンテーションから分離し、以下のようなルールを定めるというものです。 （現状はDart自体がFlutter開発のための言語のようなものなのでBlocの実装ライブラリはFluttter用に開発されてるような感じです。）
- Inputs and outputs are simple Streams/Sinks only
- Dependencies must be injectable and platform agnostic
- No platform branching allowed
- Implementation can be whatever you want if you follow the previous rules
この資料が概要を理解するのに分かりやすかったのでリンクを貼っておきます。 slides.com
注意
その２ではライブラリを今回使用しているflutter_blocから変更しています。flutter_blocが不要であればこの記事は飛ばしてください。 hnak.hatenablog.jp
手順
0. 開発環境のセットアップ
FlutterSDK自体のセットアップについては割愛します。公式のチュートリアル通りに進めて問題ないはずです。
1. サンプルのチェックアウト
今回はBlocライブラリのレポジトリにあるFlutterのfirebaseサンプルを起動させてみたいと思います。
以下レポジトリをクローンします。
github.com
bloc/examples/flutter_firebase_login/ 下にfirebase loginを使ったサンプルソースがあります、作業を続ける前にFirebaseのセットアップをしておきます。
2. Firebaseのセットアップ
Firebaseで適当なプロジェクトを作成してiOSアプリの追加をします。
情報を埋めて新規iOSアプリの追加を行います、この時画面の指示に合わせてGoogleService-Info.plistをダウンロードします。
firebase authentificationの設定からGoogleログインをONにしてください。
3. サンプルの編集
bloc/examples/flutter_firebase_login/ios/Runner/GoogleService-Info.plist のファイルをダウンロードしたファイルで上書きしてください。
同じディレクトリにあるInfo.plistを開いて「paste-the-reversed-client-id-from-googleservice-info.plist-here」と記載されている場所にGoogleService-Info.plist内に記載されたREVERSED_CLIENT_IDの内容を上書きしてください。
4.サンプルの起動
以下コマンドでサンプルが起動するはずです。
# サンプルディレクトリに移動 $ cd bloc/examples/flutter_firebase_login # アプリを起動 $ flutter run
このソースを参考に独自にアプリを構築する場合はbloc/examples/flutter_firebase_loginを切り出すような形になると思うので、その場合はBlocライブラリのパスをローカルの相対パスからライブラリ参照に変更してください。
bloc/examples/flutter_firebase_login/pubspec.yaml
flutter_bloc:
path: ../../packages/flutter_bloc
↓以下に変更
flutter_bloc: ^0.13.0
