【Flutter Flow】ToDoアプリを作っていく #1

# はじめに
ノーコード・ローコードツールとして最近注目している「Flutter Flow」を使って、ToDoアプリを作っていきたいと思います。

# 記事について
一気に記事にすると、長くなるので、Youtubeの動画に合わせて何回かに分けて、記事を書いていきます。
基本的には、Youtubeの内容の文字起こしと思ってください。

ノーコード・ローコード勉強チャンネル
https://www.youtube.com/watch?v=hGq1LZw2E5I


# Todoアプリの機能
1. ToDoを一覧で見れる。
2. ToDoのステータス変更できる。
3. ToDoが作成できる。
4. ToDoを編集できる。
5. ToDoを削除できる
![スクリーンショット 2023-03-07 14.02.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3203585/c535984f-923e-7441-ea62-a5717c7ab679.png)

# Firebase
Firebaseの下記の機能を使っていきます。
1. Authentication
2. Firestore database

# Firebaseの設定
![スクリーンショット 2023-03-07 15.21.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3203585/ec68ca43-3c9d-cf7f-30a8-abcd70f6af28.png)
Firebaseのページに移動して、右上にあるコンソールに移動をクリックします。
初めての場合は、プロジェクト作成と出るので、プロジェクト作成をします。

![スクリーンショット 2023-03-07 15.21.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3203585/f340ae15-bf7d-23dc-aa14-52bb1d5e5400.png)
プロジェクト名は、アプリ名などわかるものを入れてください。
規約に同意と、利用目的の内容にチェックしてください。

アナリティクスは、今回はとりあえずなしで進めます。
プロジェクトを作成しているので、待ちましょう。

![スクリーンショット 2023-03-07 15.25.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3203585/9e8b101b-121c-2cd1-0cec-76fb2ddbcbab.png)
次にユーザーの設定をします。
プロジェクトの概要の横の歯車をクリックして、ユーザーと権限を選択します。

![スクリーンショット 2023-03-07 15.26.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3203585/70adb672-2d71-d2f3-1fee-58f373c52490.png)
自分のユーザーが出ているので、メンバーを追加します。
firebase@flutterflow.io を追加します。
役割は、編集者にして完了します。

次にファイヤーベースの権限を追加します。
権限に関する詳細設定をクリックします。
初めての場合、利用規約が出てくるので、チェックして進めます。

![スクリーンショット 2023-03-07 15.27.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3203585/d085a954-2192-f743-3f63-3d3bd0d5c6d8.png)
一覧が出てきます。
このfirebase@flutterflow.io ユーザに対して別の権限を割り当てます。
鉛筆アイコンをクリックします。

![スクリーンショット 2023-03-07 15.28.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3203585/0972b1e3-f539-d40e-1f80-e7ae6be77abe.png)
別のロールを追加で、Cloud Function 管理者の権限を追加します。
保存を押して保存します。

![スクリーンショット 2023-03-07 15.35.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3203585/1fb1b6a1-73f4-d5ad-705c-97f3744be4a2.png)
Firebaseの画面に戻って、左下を見てください。
今はスパークという無料プランなのでこちらをアップグレードして、従量制のブレイズに切り替えます。
課金の設定が必要なので、情報を入力します。 

![スクリーンショット 2023-03-07 15.29.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3203585/5d0b91e8-cb5a-cdc8-ac93-231700637df2.png)
クレジットカード情報などを入力して、画面をすすめると、課金予算設定となるので、適当には100円などにしておきましょう。

次にプロジェクトの概要の横にある歯車アイコンをクリックして、プロジェクト設定を見ます。
ここに記載されているプロジェクトプロジェクトIDを覚えておいてください。

Flutter Flowのページでアプリを作っていきます。
右上のCreate Newボタンを押します。

![スクリーンショット 2023-03-07 15.30.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3203585/0cbe8844-56e2-2318-e188-2c00743aab2b.png)
プロジェクト名には、今回作るToDoと入力します、
テンプレートは、ブランクAPPを選んで作ります。

プロジェクトネームとパッケージネームが表示されるので、適宜変更してください。
Setup Firebaseはチェックしたまま、次へ進みます。

FirebaseのプロジェクトIDの入力があるので、先程のFirebaseのプロジェクトIDのを入力してください。
終わったら、コネクトボタンを押します。

![スクリーンショット 2023-03-07 15.32.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3203585/55ebf94b-061e-bd69-7ab9-ee9bdcaeea6b.png)

コネクトできたのでAuthenticationと、Create User Collectionはオンにして、進めます。
Start Buildingを押します。

![スクリーンショット 2023-03-07 15.33.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3203585/9d49139c-bf4a-10b5-8f15-506bbd69d7c9.png)

何もないアプリを作れました。
今回は、終わりにしたいと思います。