FlutterFlowチュートリアル⑧ 詳細画面の作成

詳細画面の作成

DetailPageを作成します。

詳細画面への画面遷移

HomePageのListItemの子にあるWidgetを選択して「Add Action」から「Navigate To」を選択し、DetailPageを選択します。

ProductIdを詳細画面に渡す

設定したActionの一番下の方にある、Parametersの「Define」をクリック。

ParameterNameにproductを入力し、TypeはDocumentを選択し「Confirm」をクリック。

戻ると「null（non-existent）」または「Pass」という表示がされているのでクリック。

下記を参考にproductの値としてProductのDocumentを選択します。

最後に「Confirm」をクリック。詳細画面にProductが渡される設定が完了しました。

詳細画面での表示

詳細ページにTextを3つ追加します。

Textの値として、先ほど渡してもらったproductの値を表示します。

その他のTextについても同様にproductの値を表示します。

動作確認してみましょう。詳細画面に値が表示されていれば成功です。