「[実践]FlutterとFirebaseを使ったアプリ開発」を実践する

はじめに

Flutterで、firebaseを用いたアプリ開発をしたいので、勉強用に買った本でアプリを一つ作ってみる。 [flutterの勉強サイト](https://www.flutter-study.dev/introduction/about-flutter)を運営している著者の本。サイトだけ見ても勉強できると思うが、調べるのが面倒なので本を買って本の中身を一通りやってみることにする。 新しく学べたことをメモ程度に書いていくだけ。

ちなみに作成物は以下のgithub repositoryにあげています。

1章: FlutterとFirebaseの概要

特に得るものなし。

2章: 設計と環境設定。

設計：画面の遷移、画面に必要な機能、機能の実現に必要な処理、firebaseとのやりとり、などを図などで書いてみること。

既存の環境は以下のような感じ。
ちょっと本のバージョンと違うが、このまま進める。

$ flutter --version
  ╔════════════════════════════════════════════════════════════════════════════╗
  ║ A new version of Flutter is available!                                     ║
  ║                                                                            ║
  ║ To update to the latest version, run "flutter upgrade".                    ║
  ╚════════════════════════════════════════════════════════════════════════════╝


Flutter 2.2.3 • channel stable • https://github.com/flutter/flutter.git
Framework • revision f4abaa0735 (3 months ago) • 2021-07-01 12:46:11 -0700
Engine • revision 241c87ad80
Tools • Dart 2.13.4

ローカル及びFirebaseでそれぞれアプリを作成して、2章終了。

3章: UIの作成

3-1:ログイン画面の実装

• TextFormFieldの簡単な記述。
• TextFormFieldへのvalidationの付け方。

実装後のスクリーンショット

3-2: 画像一覧画面の実装

• Navigatorの説明がちょっとある。
• PageControllerの使い方のコードも参考になるかも。
• GridViewの使い方。

実装後のスクリーンショット

3-3: 画像詳細画面

• BoxDecorationの使い方
• widgetの引数で、変数だけじゃなく関数も渡せる！(コールバック関数)

ちなみに、iOSだと画面の上下左右にsafeareaがあり、タップできない空間となっている。
そこにボタンが重なってしまうとよくないので、SafeAreaのwidgetを用いて修正した。

3-4: この章のまとめ

この章で勉強したWidgetは以下。
どんなWidgetを使えばいいかとかは、勉強しはじめの時はわからんかったから役に立った。

Widgetの一覧は以下。

以下のキーワードで検索するとより詳しく知れる。

• Form
• TextFirnField
• Navigator
• PageView
• BottomNavigationBar
• GridView
• Image

これで、UIの部分は完了！

4章: ログイン機能の実装

ここからは、Firebaseと接続したりして、実際の挙動を実装！

4-1: FlutterとFirebaseの連携

必要な準備

• Firebase構成ファイルをソースコードに反映(Android/iOS)
• Firebase用ライブラリをインストール
• Firebase初期化処理を入れる

Firebase構成ファイルをソースコードに反映(Android)
本に書いてある方法及び、Firebaseで指示される方法だけだと、以下のようなエラーが発生してしまいます。

Cannot resolve symbol 'Properties'
Cannot resolve symbol 'GradleException'

これを解決するために、以下のサイトに従って処理を行います。

初期化処理
非同期処理(Future)はawaitで処理が終わるのを待つことができる。
ただし、awaitを使うときは関数にasyncをつける必要がある。

4-2: Authenticationを準備する

Firebase側で色々認証方法が選べるので、メールアドレス以外にも色々試してみたい。
Twitterとgoogleは少なくとも今後実装したい。

4-3: 実際にアプリから新規登録する

FirebaseAuthを用いたsignUpの方法。
複雑な処理はライブラリーが行ってくれる。
エラー時のダイアログ表示も簡単に行えるっぽい。

ここまでやってアプリを起動してみると、アプリを立ち上げる途中にpod installの部分でエラーが出て落ちてしまった。
色々調べて、iOSの最低バージョンを上げるとエラーがなくなった。

動くようになったのちに、アプリから新規登録したらきちんとユーザが登録されていた！

適当なメールアドレスや登録してあるメールアドレスはきちんと弾いてくれるっぽい。めちゃ良い！

4-4/5/6: ログアウト/ログイン/初期画面切り替え

FirebaseAuthのメソッドを使うと、ログインログアウトも簡単！！

4-7: 4章まとめ

• FirebaseのAuthenticationを使うと、新規登録・ログイン・ログアウト・ログイン状態管理が簡単に実装できる！
• TextFormFieldの入力内容を取得するには、TextEditingControllerを使う！

5章: 画像を管理する

file_pickerを用いてスマホ内の画像にアクセス
firebase_storageを用いて選択されたものをCloud Storageに保存
cloud_firestoreを用いて保存された画像の保存先URLなどをデータベースに保存・呼び出し

6章: アーキテクチャを整える

6-1: モデルとレポジトリの導入

外部(ここではfirebase)とやりとりするためのレポジトリ層
データを受け渡しするためのデータモデル

ちゃんとアーキテクチャ設計とか学ぼう。

6-2: 状態管理

flutter_riverpodを用いる。

Providerの種類

• StateProvider: 更新可能なデータを渡す。
• StreamProvider: Streamをデータとして渡す。
• ScopedProvider: 状況に応じてデータを切り替える。

データ取得方法の種類

• ConsumerWidget: これを継承したWidgetを用いると、buildの中でデータを受け取れる。
• Consumer: consumerのコールバックからデータを受け取れる。
• context.read(): ボタンをタップした時など、その時点のデータを受け取れる。

文章で書いてもよくわからないので、実際のコードを見て利用方法を理解すべし。

6-3: 削除・お気に入り機能の追加実装

ボタンタップによりデータを更新・削除する処理。
モデルインスタンスを更新するのではなく、値を書き換えたインスタンスを新たに作成してfirestoreに保存する。

6-4: 画像共有機能

shareを用いる。

7章: アクセス制御

不正アクセスを防ぐため、Cloud Firestore/Cloud Storageに存在するセキュリティルールと呼ばれる仕組みを用いる。

まとめ

これで、以下のアプリが完成した。

今後は、以下を実装していく。

• Twitter/Gmail連携のユーザ登録・ログイン
• 他のユーザの投稿が見られるようなセキュリティルールの記述
• 地点データなどの他の種類のデータの保存
• 多:多のデータの結びつきの実現
• google admobによる広告の実装