![見出し画像](https://assets.st-note.com/production/uploads/images/116375896/rectangle_large_type_2_1b8ee770fb9ad8c0c49b32455f90c4e6.png?width=1200)
【FlutterFlow】いざテストラン!果たして結果は?:ドキュメント・レファレンスの送受信
はい、こんにちは!前回記事からの続きです。FlutterFlowで、ページ間でドキュメント・レファレンスの受け渡しについて、ご紹介しています。
前回は、ページウィジェットにバックエンドクエリを設定し、レファレンス先のドキュメント(Users)を参照できるようにしてから、ウィジェットとフィールド値を紐づけました。
これで下図の作業は全部終わったことになります。
![](https://assets.st-note.com/img/1694895419385-JGXYiyzVyQ.png?width=1200)
ということで、今回は、動作の検証です~♪。楽しそうなふりして、内心、「きちんと動かなかったらどうしよう…」という気持ちの方が大きいです…。
えーい、いってみよ~。
ページの流れを確認
まずは、何を検証するかを確認しましょう。
FlutterFlowのストーリーボードは、次の通りです。
![](https://assets.st-note.com/img/1694895645017-KZKhBMOIfj.png?width=1200)
「やることリスト」に、「やること」が3つ登録されているので一つをタップします。
「やること詳細ページ」が開きます。担当者のプロフィール画像をタップします。
担当者の「ユーザ詳細ページ」が開きます。
全体像はつかめましたね。では、テストラン!
テストラン!結果はいかに?
最初のページ「やることリスト」を開きます。
やることは3つ登録されています。一番上の「エアコンの修理」をタップ。
![](https://assets.st-note.com/img/1694896099369-YZK09WEVfd.png?width=1200)
アイテムの詳細ページに遷移しました。
![](https://assets.st-note.com/img/1694896135696-D7D6ZqhLNg.png)
これは、詳細ページの「ドキュメント」をパラメータに渡し、それをウィジェットで表示させているのでしたね。前回シリーズで頑張りました。そして、担当者のプロフィール画像をタップ!
やった~!きちんとUsersのID(ドキュメント・レファレンス)がパラメータに渡されて、それを元にバックエンドクエリして、データを表示させることができました!
![](https://assets.st-note.com/img/1694896165639-WKfIksAkyn.png?width=1200)
よし、うまくいった~。
2件目もチェック!
いや、もしかしたら次のアイテムではうまくいかないかも。2件目を一応やってみましょう。
ポチ。
![](https://assets.st-note.com/img/1694896197213-hSLyZZ4wsx.png?width=1200)
プロフィールをポチ。
![](https://assets.st-note.com/img/1694896225299-Qd74uNAYLA.png)
よっしゃ~、大丈夫ですね。
![](https://assets.st-note.com/img/1694896255933-q2sGuMjWAZ.png)
2件目もOK!
3件目もチェック
アイテムが3つしかないのだから全部チェックしますか?やりましょう!
買い物をポチ。
![](https://assets.st-note.com/img/1694896298107-mWNVaMfFRU.png)
プロフィール画像をポチ。
![](https://assets.st-note.com/img/1694896326336-VZmGDrlImW.png)
イェーイ♪
![](https://assets.st-note.com/img/1694896348596-vTlOpoiolo.png)
3件目もOKだ~。
ということで、受信ページのページパラメータに、送信ページから「ドキュメントレファレンス」を送る、というこのシリーズ、実装完了でございます!
よかった、ほっとした~。
次回は、このシリーズをまとめますよ!
では。
この記事が気に入ったらサポートをしてみませんか?