FlutterFlowチュートリアル⑤ Firestoreにデータを保存する
ここでは画面で入力した値をデータベースに保存する処理を進めていきます。
フォームの追加
SecondPageにフォームを追加します。
今回は、
- TextField
- TextField
- CountController
- Button
の順でSecondPageのColumnに追加します。
これがFirebaseのFirestoreに保存されるようにしていきます。
データーベスの準備
コレクションの作成
Firestoreタブに移動し、「Create Collection」をクリック。
今回は商品のデータを保存するので、productsというコレクションを作成します。
フィールドの設定
「Start for scratch」をクリック。
FieldNameにnameと入力し、FieldTypeをStringに設定します。
その後、一番右にあるチェックマークのボタンを押すとフィールドが作成されます。
同じように、descriptionとstockというフィールドを作成します。
ボタン押下時にデータをFirestoreに保存する
「Add Action」から、「Firestore」>「Create Document」を選択します。
ちょっとスクロールで上に遡り、「Collection」に先ほど作成したproductsを選択します。
その下のSetFiledで「Add Filed」を押しても反応がなくなるまでクリック。
nameとdescriptionとstockのフィールドが表示されます。
nameフィールドの「>」ボタンをクリックし、Value Sourceで「Form Variable」を選択。
下記のように「UNSET」>「Widget State」>「TextField1」と選択していき、TextField1の値ををnameフィールドの値として設定します。
同様に、descriptionはTextField2に、stockはCountControllerに設定します。
動作の確認
動作の確認には画面右上の雷マークをクリックします。3分程度待つと操作できるようになります。
フォームに値を入れて「Button」を押してみましょう。
Firestoreにデータが保存されていれば成功です。
