FlutterFlowチュートリアル⑦ Firestoreのデータを取得する

ListViewの設定

HomePageを選択し、以前追加していたWidgetを全て削除し、ListViewを追加します。

ListViewを選択した状態で、「Backend Query」タブから「Add Query」> QueryTypeに「Query Collection」を選択。Collectionにはproductsを選択します。

その他の項目はそのままで「Confirm」をクリックします。ダイアログが出ますが再度「Confirm」をクリックします。

ListViewにRowを追加します。

Rowの中にTextを3つ追加します。

一番左のTextを選択した状態で、編集ボタン(①)から「products Document」>「name」を選択します。

2つ目3つ目も同様に設定していきます。

雷ボタンで動作の確認をします。Firestoreのデータが表示されていれば成功です。

再度SecondPageへ遷移するボタンを追加しておきましょう。

余白をつけたいWidgetを選択して右クリック、「Wrap Widget」から「Container」を選択します。

横幅などを設定すると余白ができます。

%で指定してデバイスのサイズに合わせて調整することもできます。全てにContainerを追加して横幅を40%・50%・10%で設定したらこのようになります。