🦔

FlutterFlowとFirebaseの接続

2021/06/20に公開

Firebaseプロジェクトのアプリの設定を反映

FlutterFlowとFirebaseは簡単に接続できます。
Firebaseと接続するのは、認証機能やDB(Firestore)などと連携したアプリを作るためです。

私の当初の目的であるプロトタイプ作りでは、認証は実装されてなくても良いとして、DBはなるべくリアルに近い方が良いと感じます。

Firebaseのプロジェクト作成が済んでいるところから紹介します。
プロジェクト作成については、左側にあるメニューの説明やネット検索で多くの情報が得られます。

FlutterFlowでは、プロジェクトを作成するとパッケージ名がデフォルトで下記のようになります。
パッケージ名は適切な名称に設定しましょう。

名称	設定
Project Name	Blog
Package Name	com.flutterflow.blog

このプロジェクト名、パッケージ名が記載されているのは、左側にある下記のメニューです。

メニューを選択すると画面冒頭にありますので、適宜変更してください。

この下には他の設定がいくつかあります。それらについては先々紹介したいと思います。

FirebaseのプロジェクトでAndroidとiOSのアプリの設定ファイルをダウンロードし、それらをFlutterFlowにアップロードします。
下記のメニューのFirebaseの設定画面に移動します。

画面下部からファイルをアップロードしてください。

認証機能を実装する場合は、下記メニューから設定してください。

Authentication Enabledをオンにします。

DB機能を実装する場合は、下記メニューから設定してください。

ここでは、Firestoreにあるコレクションと同じものを記載する必要があります。
（これは地味に手間ですが。）
ただし、認証したユーザーのコレクションは自動で作成できます。

Create User Recordをオンにし、usersというコレクションを作成します。

すると自動的にコレクションが作成されます。

設定は以上となります。

認証機能を実装する場合は、ウィジェットで認証ボタンを用意し、アクションで認証の設定をしてください。DBから値を取り出す場合は、ウィジェットで設定します。値を追加・変更する場合はアクションで設定します。これらについては、また記事を作成したいと思います。

動作確認はプレビューではできず、ローカルで動かす必要がありますのでご注意ください。
（FlutterFlow上で動くようになるような案内が来ていたようなので、近々動作するかもしれません。）

このようにFirebaseの設定は簡単にできるので、ぜひ試してみてください。