FlutterFlowチュートリアル⑤ Firestoreにデータを保存する
ここでは画面で入力した値をデータベースに保存する処理を進めていきます。
データーベスの準備
ここでは②で作成した画面にあったフィールドを持つデータベースを作成していきます。
- name（タスク名）
- description（タスク説明）
- tag（タグ）
- dueDate（タスク期限）
の4項目が必要なフィールドになります。
コレクションの作成
Firestoreタブに移動し、「Create Collection」をクリック。
今回は商品のデータを保存するので、tasksというコレクションを作成します。
tasksと入力して「Create」をクリックしてください。
フィールドの設定
「Start for scratch」をクリック。
FieldNameにnameと入力し、FieldTypeをStringに設定します。
その後、一番右にあるチェックマークのボタンを押すとフィールドが作成されます。
同じように、descriptionとtagとdueDateというフィールドを作成します。
※dueDateのDataTypeはDateTime(日付)であることに注意してください。
タスク作成のPageを追加する
新しくPageを追加し、その際にテンプレートの「Create 04 - Task」を選択します。
見つからない場合は「Task」と検索すると出てきます。
ボタン押下時にデータをFirestoreに保存する
画面最下部にあるボタンを選択した状態で、「Add Action」から、「Firestore」>「Create Document」を選択します。
ちょっとスクロールで上に遡り、「Collection」に先ほど作成したtasksを選択します。
その下のSetFiledで「Add Filed」を押しても反応がなくなるまでクリック。
nameとdescriptionとtagとdueDateのフィールドが表示されます。
nameフィールドの「>」ボタンをクリックし、Value Sourceで「Form Variable」を選択。
下記のように「UNSET」>「Widget State」>「task(Task...)」と選択していき、task(Task...)部分の値ををnameフィールドの値として設定します。
同様に、descriptionとtagとdueDateも設定します。
※dueDateはValueSourceの部分で、Date/Time Pickerを選択してください。
参考までに、日付部分(dueDate)は、Containerという枠に対して、OnTapでDate/Time Pickerが表示される、というアクションが設定されています。
動作の確認
アプリ起動時の画面を変更する
アプリを起動した際の初期表示画面を変更します。今回は作成画面の動作を確認したいので「Create04Task」を選択してください。
アプリのrun
データ等も関連した動作の確認には画面右上の雷マークをクリックしてrunします。3分程度待つと操作できるようになります。
フォームに値を入れて「Get Started」ボタンを押してみましょう。
ボタンは画面最下部にあるので、見切れている場合はアプリのプレビュー画面を縮小させる必要があるかもしれません。
Firestoreにデータが保存されていれば成功です。
詰まったら下記の動画を参考にしてください
ページの追加からFirestoreへのデータ保存までの動画です。
UIの調整
タスク管理アプリの文言を調整しておきましょう。
