【保存版】FlutterFlowの初期設定を解説！FirebaseやDB作成も

最近話題のFlutterFlow、実際に利用してアプリを作りたいと思っても
「初期設定の手順が若干複雑で毎回忘れてしまう・・・」
という方も多いのではないでしょうか。

この記事ではFlutterFlowに加え、連携先のFirebaseの権限設定、DB作成などの一連の手順を解説します。

始めたてで作業に迷う方は、こちらを見てセットアップを進めて行きましょう！

※2023年8月版の環境となります

まずはProject（PJ）を作る

さあ、まずはFlutterFlowを開いて、「Start for free」をクリックしてみましょう。

アカウント作成をするとホーム画面に移動します。

Googleアカウントをお持ちの方は”G”マークを押して始めると便利ですよ。

さあ、このような画面が出てきたら最初のFlutterFlow側の準備はOKです。

次にFirebaseを開いて「コンソールに移動」「プロジェクトを追加」を選択しましょう。

Firebaseはブラウザから検索すると、一番最初に出てきます。

名前を設定します、任意の名前でOKです。

Googleアナリティクスは一旦、無効でOKです。

一般公開した際にアクセス情報や分析が行えるツールですが、必須項目ではないです。

ここまでで最初の両方のプロジェクト作成は完了です。

基本的にFlutterFlowはフロントエンドと呼ばれる、実際にユーザーが目にするボタンや機能の実装をノーコードで行うことができます。

一方、Firebaseはバックエンドと呼ばれる、管理者側が使用するユーザー情報やデータベースの設計を行うことができます。

こちらは画面操作が基本ではありますが、一部コードを書く必要も出てきます。

基本はこの組み合わせで基本的なサービスを開発可能ですが、最近はsupabaseと呼ばれるバックエンドツールも人気ですので、慣れてきたらこちらもチャレンジして見てください。

Firebase側の設定を行う

1.権限設定から行なっていきましょう

基本は最初にFlutterFlow側に表示されるDocument通りでOKです

 – https://docs.flutterflow.io/data-and-backend/firebase/firebase-setup

1.プロジェクトの概要の横にある歯車マーク(設定) > ユーザーと権限 を選択

2.メンバーの追加、編集者として割り当てる(アドレスはDocument上にあるこちら)

    – firebase@flutterflow.io

3.下にある「権限に関する詳細設定」をクリック、GoogleCloudのIAM管理に飛ぶ

 先ほど追加したアカウント(firebase@flutterflow.io)に 別のロールを二つ追加

    – サービスアカウントユーザー

    – クラウドファンクションズ 管理者

※検索で出てこない場合、スクロールで確認すると確実です。

2.続いてデータベース作成と連携を行なっていきましょう

 1.構築 > Firestore Database からデータベースの作成を選択

    – テストモードで開始

    – asia-northeast1 (Tokyo)にロケーション設定

 2.構築 > Authentication から始めるを選択

    – Email / Passwordを選択、上のボタンをオンにして保存(リンクの方は不要)

 3.構築 > Storage から始めるを選択

    – テストモードで開始

    – ロケーション設定は不要

3.最後にID情報をコピーしてこの章を終了しましょう

プロジェクトの概要の横にある歯車マーク(設定)> プロジェクトの設定 を選択

    – プロジェクトIDをコピー

        – test1-acd6f など

FlutterFlow側の設定を行う

最後にFlutterFlow側の設定を行って完了です。
あと１ステップですので、頑張りましょう🔥

まずはテンプレートから一つを選んで、プロジェクトを作成しましょう。

このような画面が出てくるので、先程作成したプロジェクト IDをペーストしてConnectします。

続いてAuto Generate Config Fileを選択し、GenerateFileを選択。

Firestore IndexesはDeployを選択→StartBuildingを行いましょう。

最後に、右上にエラーのアラートが出ていると思います

こちらを解消するためには設定 > Firebaseを開いてFirebase StorageからDeployを選択しておきましょう。

さあここまでで一通りの設定は完了しました。

ただ、選んだプロジェクトによっては右上のエラーが発生してしまい、中々先に進むのが億劫になってしまいます。

そこで、ここからは他のプロジェクトを選んだ場合に起きうるエラーの対処法の説明です。

他の場合も、例えばChatGPTに聞いてみたり、一度エラーの文章を読んでクリックしてみるなど、冷静に対処していきましょう。

1.Firebase set app wizerd(魔法の帽子のアイコン)から「Enable Authentication」「Create User Collection」を選択してON

2.ログイン前とログイン後のページを2枚用意し、「EntryPage」「Logged in Page」に適用

まとめ

この記事では、FlutterFlowの基本設定を行いました。

FlutterFlowの設定は一見複雑に見えますが、各ステップがしっかりと分かれているので、本記事を順に読んでいくだけで大丈夫です。

英語が苦手な方も、冷静に一つ一つのステップを踏んでいけば、特に問題はありません。

例外ケースも存在しますが、基本的な設定をしっかりと行えば、準備はほぼ完了です。

まずは基本設定でしっかりと準備を整え、アプリ開発を楽しんでいきましょう！