見出し画像

【FlutterFlow】総まとめ!これで分かった!リストを使ったデータの送受信

はい、こんにちは!前回記事からの続きです。リストビューを使ったページ間のデータ受け渡しに取り組んでおりました。

前回は、そのリストビューを使ったページ間のデータの受け渡しを成功させました!無事最後まで紹介できて本当によかった…。

そして今回は、これまでの記事を踏まえて、このシリーズのまとめをしましょう!

最も基本的な導線

まずは、どんな目標だったかを確認しましょう。

ページ1(送信側ページ)にリスト(例えば「やることリスト」)を表示させ、そのアイテムの一つをタップすると、ページ2(受信側ページ)で詳細が表示されるというものです。

もう少しブレークダウンするとこうなります。

  • コレクションにドキュメントを格納しておきます。

  • 送信ページにドキュメントの一部のフィールドをリスト表示させます。

  • ドキュメントをタップすると受信ページに、より多くのフィールドが表示されます。

これを実現するには、どんな手順を経たのでしょう?

作業する順番が大事でした

上記を実現するにあたり、次のような手順で進めました。直感だけを頼りに作業すると多分、訳が分からなくなります…。

  1. コレクションを準備する

  2. リストページ(ページ1)を作りリスト表示する

  3. 詳細ページ(ページ2)を作りパラメータを作る

  4. リストページ(ページ1)からドキュメントをパラメータに送り込む!

  5. パラメータに格納されたドキュメントを表示させる

これを視覚的に表したのが、次の図です。迷子にならないよう、毎回ブログの最初に表示させました。最終的に分かったことを踏まえて改良しました!

パスするのは「ドキュメント」だ!

注目していただきたいのは、「何を送っているのか」です。

3.のパラメータはどう設定したでしょうか。次の通りです。

詳細ページのページパラメータ設定

そう、「ドキュメントを受け取る」と設定したのです。コレクションじゃないですよ、ドキュメントのフィールド値でもないですよ。ドキュメント単位で受け取ります。

一方、4.では、リスト側ページで「何を送る」と設定したのでしょうか!?はい、「ドキュメント」でございます。次図のとおりです。

リストにNavigatetoのアクションをつけると同時にDocumentをパスする

受け取る設定も、送る設定も「ドキュメント」で一致していることが確認できました。

使うときはドキュメントプロパティ

パラメータに投げ込まれた「ドキュメント」は、格納だけしていても意味がありません。使わなければ。

このドキュメントは、どう使ったのでしょうか。そうです。テキストウィジェットの値として、紐づけたのですね!

この時初めて、表示させる値として、フィールド値(プロパティ)を指定したのでした。

テキストウィジェットとDocumentプロパティを紐づける

データの受け渡しまでは、「ドキュメント」単位で行い、いざ使うときになったら、パラメータに届いた「ドキュメント」から「プロパティ」を取り出して使う、というのが基本的な流れになります。

絵をもう一回再掲します。

イメージ、湧きました?だいぶ、すっきりしましたね!そう、思っていただけれたら幸いです。


はい、以上が、コレクションのデータをリスト表示させ、そのアイテムの詳細を別ページに受け渡す、というお話でした。今回のシリーズは、うまくまとまってよかった…。「Google認証の悲劇」(何回も記事を書いて結局実現できなかった)を思えば…。

次回は、、、ドキュメント・レファレンスをやりますか…。「ドキュメントを送るの?え、ドキュメント・レファレンスを送るの?」という疑問にもうそろそろ結着をつけたい、です。

うまくいく自信?まったくないです。失敗も含めて、生暖かい目で見守っていただけると、著者は喜びます!

では。


この記事が気に入ったらサポートをしてみませんか?