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

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

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

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

このページの動画
https://www.youtube.com/watch?v=eZ89ab1j9f8

# 残りのFirebaseの設定
まずFirebaseのダッシュボードから、Authの設定をします。
左のメニューの構築にAuthenticationがあります。

![スクリーンショット 2023-03-13 16.25.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3203585/3cc7149f-5045-5ff1-53a9-dd426c26b6f2.png)
始めるが出てくるので始めるをクリックしてください。

![スクリーンショット 2023-03-13 16.26.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3203585/57f9e78a-347b-a7b6-2289-784e0b27fbc4.png)
ログイン方法は、いろんな種類が選べます。
今回はメールとパスワードを選択します。
メールとパスワードを有効にして、保存を押します。
設定ができたので、次にFirestoreを使う設定をします。

![スクリーンショット 2023-03-13 16.26.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3203585/7136125d-6923-04e9-2b95-24b2b71e4b11.png)
メニューの構築から、Firestore Databaseを選択します。
データベースの作成を押します。

本番環境モードとテストモードが選べるので、ここでは一旦テストモードを選択します。
ロケーションの選択は、近い場所を選んでください。
今回は東京を選んで、有効にするをクリックします。
これでファイアストアの設定が終わりました。

# Flutter FlowでFirebaseの設定
Flutter Flowのページに行って、左端のメニューの歯車のアイコンを押します。
Firebaseを選んでもらうと、設定が出てくるので、プロジェクトが正しいことを確認して、Generate Filesのボタンを押します。
![スクリーンショット 2023-03-13 16.30.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3203585/09ca4dad-21ae-abd2-33a0-17c52964729a.png)
Firebase Setup Completeと出れば完了です。

# 画面の追加
![スクリーンショット 2023-03-13 16.32.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3203585/d2d21277-1d0c-d3a7-b135-d917f7dec804.png)
左側のメニューで、上から二番目のアイコンクリックします。
今あるページが見れます。
オレンジの追加ボタンをクリックして、ページを他に２つ追加します。

![スクリーンショット 2023-03-13 16.33.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3203585/7a2954d9-b334-97a5-4262-a76fa386c3cc.png)
ブランクを選択して、ページ名はLoginとしておきます。
もう一枚も同じようにして、サインアップとします。

# ログイン画面の作成
デフォルトの構成として、カラムとアップバーがあります。
カラムの下にテキストフィールド入れていきます。

![スクリーンショット 2023-03-13 16.35.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3203585/e8f791c8-bfb2-cd00-bef9-d5b6f518c708.png)
部品一覧から、テキストフィールドを選択して、ドラッグしてもいいですし、

![スクリーンショット 2023-03-13 16.35.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3203585/770f4549-e562-ca09-5f84-73b215a337a3.png)
ツリー構造の方から、カラムのとこを選んで、 テキストフィールドを追加しても大丈夫です。

![スクリーンショット 2023-03-13 16.36.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3203585/67551b2f-a2e9-19c1-2843-361b19c03a10.png)
部品が詰まって見えるので、余白を適当に入れておきます。

ボタンを付けたいので、カラムのところで、ボタンを選んでもらってボタンを追加します。

![スクリーンショット 2023-03-13 16.37.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3203585/b3ed24ac-9cac-b260-0e04-3e6f893a0af9.png)
テキストフィールドの設定で、ヒントテキストを書いていきます。
ログインページなので、メールアドレスとしておきます。
もう一つは、パスワードとします。

ボタンにもテキストがあるので。ログインとしておきます。

![スクリーンショット 2023-03-13 16.38.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3203585/10fe12b6-60a8-d750-9fbe-47443642eabe.png)
ログインの前にサインアップしなくてはいけないので、もう一つこれテキストを追加して、新規登録はコチラ としておきます。
少し余白を入れておきます。
これでログインができました。

![スクリーンショット 2023-03-13 16.39.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3203585/c8ce6e17-f14e-d187-6eae-ff0638fbe09a.png)
ここをコピーします。
コピーして サインアップの方でペーストします。
サインアップに、新規登録のテキスト不要なので消しておきます。


ボタンのテキストは、ログインではなくて、新規登録とします。

![スクリーンショット 2023-03-13 16.40.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3203585/8c2e56e4-c964-c066-8344-5df0402346f6.png)
あと、ページタイトル気になるので、このテキストは新規登録とします。
ログインの方もページのタイトルを変えておきます。
これで、ページのベースはできたのかと思います。

# 入力制御
![スクリーンショット 2023-03-13 16.41.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3203585/17e37004-2102-674c-1894-9a79585a3944.png)
コピーする前にやればよかったのですが、メールアドレスのテキストフィールドを選んで、設定の下の方にキーボードの設定があるので、ここをメールアドレスとしておくと、キーボードがいい感じになります。
パスワードの方は、Additional Settingのプロパティーで、パスワードフィールドとしておくと、目のアイコンがついたりします。
ログイン画面とサインアップ画面の両方に行ってください。

# サインアップ画面のアクションの設定
![スクリーンショット 2023-03-13 18.50.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3203585/c952fe41-1144-a215-8ef0-166e9843d218.png)
次にボタンの設定をしていきます。
新規登録のページの新規登録ボタンを押して、右の方のメニューにActionsがあるので、こちらをクリックします。
Add Actionを押して、Firebase Authenticationを選んで、今回は新規登録なのでCreate Accountを選びます。

![スクリーンショット 2023-03-13 18.53.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3203585/099e5c5f-559c-8c5b-b39f-6020c8a47b34.png)
Auth Providerは、Emailです。
EmailにText Field1を選びます。
Password Fieldも同じように、Password Field1を選びます。
パスワード確認用のText Fieldを作ってる場合は、設定します。
usersに保存します。

![スクリーンショット 2023-03-13 18.55.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3203585/d2f3c8a0-c112-b5f1-a3c2-ef758a45d4e4.png)
Create Accountしたあとに他のアクションも追加していきます。
Add Actionして、Firebase Authenticationにある、Send E-mail Verification Linkを設定します。
これで認証メールが送られます。

![スクリーンショット 2023-03-13 18.57.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3203585/234b9cdd-49f6-035a-256a-d12691ad8f3a.png)
Create Accountのあとは、ログインしてしまっているので、ログイン状態をなくすために、もう一度アクションを追加して、ログアウトを設定します。

![スクリーンショット 2023-03-13 18.57.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3203585/9337be18-b9d6-54f0-d202-bf3383c9b0c0.png)
その後、新規登録画面からログインページ遷移してほしいので、アクションを追加して、Navigate ToでLoginを設定をします。
新規登録画面の設定は終わります。

# ログイン画面のアクションの設定
![スクリーンショット 2023-03-13 19.00.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3203585/a0677945-1c87-b44d-acc0-b5f9a2783875.png)
ログインボタンを選択して、アクションを追加します。
Firebase AuthenticationでLoginを選択します。

先ほどと同じようにAuth ProviderはEmailで、E-mailは、Text Field1、パスワードは、Password Field11を設定します。

次に新規登録ボタンを押した時に、新規登録画面に遷移してほしいので、アクションを追加で、Navigate ToでSignupを設定します。

![スクリーンショット 2023-03-13 19.02.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3203585/65e0eebb-1c9f-9727-4be0-cdd537bef028.png)
バグが有ると出ているので、クリックします。

![スクリーンショット 2023-03-13 19.03.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3203585/43271dc5-77cc-0a4e-3c95-609ede6c879b.png)
Firebaseの設定に遷移するので、ここにログイン前のページ、ログインしていた場合のページを設定します。
ログインしていない場合は ログインページ、ログインしている場合はホームページというに設定をします。

次にテストしやすいように、ホームページにログアウトボタンを設定しておきたいと思います。

![スクリーンショット 2023-03-13 19.03.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3203585/0609554b-ba50-f317-80b9-ace262623720.png)
適当にテキストで ログアウト としておいて、こちらをクリックした時のアクションにFirebase Authenticationのログアウトを設定します。
これまでで新規登録と、ログインができました。 

# 動作確認
![スクリーンショット 2023-03-13 19.04.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3203585/fb06588e-c930-daa6-0f99-d282f2f37393.png)
次に動作確認したいと思います。
右上の稲妻マークの横のした矢印をクリックして、Runボタンを押します。
新しいタブが開いて、ビルドされます。

![スクリーンショット 2023-03-13 19.05.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3203585/95a0d827-d847-8f6d-2658-499da156bc91.png)
ビルドが終了すると、アプリが起動します。

![スクリーンショット 2023-03-13 19.05.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3203585/b6df0c57-2467-ad35-e0a2-41600a220f63.png)
まずは新規登録を行います。
新規登録はコチラをクリックして、新規登録画面に遷移して、メールアドレスとパスワードを入力して、新規登録ボタンを押します。

![スクリーンショット 2023-03-13 19.06.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3203585/d596df05-d36b-59c6-3e2b-44b3403c8162.png)
新規登録されたので、今度はログイン画面でメールアドレスとパスワードを入れてログインボタンを押すとホーム画面が表示されます。

以上

# ノーコード・ローコードのお問い合わせ
ノーコード・ローコードに関するお問い合わせ、開発依頼などは下記までご連絡ください。
ノーコードで超速でPoCなどの作成を行います。
nocodelab2023@gmail.com