【FlutterFlow】ページ間でのデータの受け渡し方法をマスターしよう

ページ間でデータの受け渡し方法を解説します。商品一覧ページをクリックした際にその商品の詳細ページを表示するようなケースでは対象となる商品の情報を次ページへ渡す必要が出てきます。

そのようなケースでどのようにデータの受け渡しを行うかを解説します。

前提

今回は商品一覧ページから商品詳細ページへ遷移するケースを例に説明します。

• データベースは以下のように商品用テーブルを作成済み。全く同じでなくてもよいです。

実装手順

商品詳細ページを作成

• 画面右上のPage Parametersから前画面から受け取るデータの設定を行います。
  今回は商品情報を受け取るのでDocumentReferenceのTypeでproductsを受け取るように設定します。

• 画面にコンテナを配置し、コンテナにPage Parametersで受け取るproductをデータとしてセットします。

• コンテナの中に表示する項目を設定。今回は商品名、詳細、値段を設定します。products Documentからname, description, priceを各テキストに設定します。

商品リストページを作成

• 画面にListViewを配置し、ListViewの中身にproductsのリストを設定します。

• ListViewの中身は商品名、商品説明を表示するようにします。（なんでもOKです）

• 次の画面（商品詳細）へ遷移するボタンを配置します。見た目はかなり適当ですが、、、

• 詳細画面へボタンを押下した際に商品詳細ページへ遷移し、その際に商品情報を渡すように設定します。
  商品詳細へボタンを選択し、右側のメニューからActionsを選びます。

• Add ActionsからNavigate Toで目的のページを選びます（例：ProductDetail）
• その後、Actionsメニューの最下部に”Pass”という緑のボタンが表示されます。ここから次画面へ送るデータを設定できます。

• 以下のように送るValueはproducts DocumentのReferenceにしてください。

はい。以上で設定は完了です。これで商品一覧ページから商品情報を次のページに送り、次のページではその情報を表示できるようになります。

まとめ

今回はいろいろなケースで利用するページ間でのデータの受け渡し方法を解説しました。使用した例ではデータベースのリファレンスを渡していますが、もちろんテキストや数字などを渡すことも可能です。

必ず必要になる機能なので本ページを参考に開発を進めてもらえればと思います。