# 新規作成した情報を次のスクリーンに引き継がせたい

**URL:** <https://www.nocode-faq.com/t/topic/4416>\
**Category:** flutterflow\
**Created:** [2024 年 11 月 19 日午後 12:33 UTC](https://www.nocode-faq.com/t/topic/4416 "2024-11-19T12:33:32Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![yuchimusic1018](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/yuchimusic1018/32/6466_2.png) [@yuchimusic1018](https://www.nocode-faq.com/u/yuchimusic1018)\
**Post date:** [2024 年 11 月 19 日午後 12:33 UTC](https://www.nocode-faq.com/t/topic/4416/1 "2024-11-19T12:33:32Z")

</div>

いつもお世話になっております。  
新規作成した情報を次のスクリーンに引き継がせるように  
リスト以外でパラメータを遷移させる方法について教えていただきたいです。

生徒が講師のレッスンを購入するボタンを押し、  
そのタイミングでデータベースにその生徒の購入情報を作成し、  
その画面で作成したレッスン購入情報を次のスクリーンで表示させたいと考えています。  
ですがボタンのアクションでcreateDocしNavigateする形を取ろうとしているのですが、うまくいきません。

レッスン購入前のスクリーンでcreateさせたレッスン購入情報を  
購入後のスクリーンに遷移する際に、購入情報をどのように遷移させれば良いのでしょうか。  
リストから詳細に飛ぶ場合はパラメータで持ってくれば良いと思うのですが、  
ご教示いただけると非常に助かります。

レッスン情報のコレクションのほかに、レッスン購入のコレクションを作成しております。

 ![スクリーンショット 2024-11-19 21.15.51](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/7/74a319e3f6e60c765cc6ca408362d93fbc11e900.png)  
 ![スクリーンショット 2024-11-19 21.20.35](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/f/f77060e72fc972642aeae29c946028ed41e3f521.png)

---

<div class="post-metadata">

**Author:** ![tsubasa](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/tsubasa/32/8670_2.png) [@tsubasa](https://www.nocode-faq.com/u/tsubasa)\
**Post date:** [2024 年 11 月 21 日午前 1:07 UTC](https://www.nocode-faq.com/t/topic/4416/2 "2024-11-21T01:07:21Z")

</div>

FlutterFlowで新しく作成したデータ（例えば「レッスン購入情報」）を次のスクリーンに引き継ぐには、AppStateのローカル変数を活用すれば良いと思いますよ。

こんな感じで、アプリ側で保持するフィールドがつくれます

 ![image](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/2/22a07e4abbf383d2e34b70958611eddfdf9783c2.png)

Action時に、Firebaseの値ではなく、Appstateの値を更新やクリアすることができます。

 ![image](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/a/a615fed840798140b69d4a12491c9862bf48be9b.png)

> **[App State | FlutterFlow Documentation](https://docs.flutterflow.io/resources/data-representation/app-state/)**
>
> Learn how to effectively utilize App State Variables in FlutterFlow to maintain and manage global application states across all pages and components.

---

<div class="post-metadata">

**Author:** ![yuchimusic1018](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/yuchimusic1018/32/6466_2.png) [@yuchimusic1018](https://www.nocode-faq.com/u/yuchimusic1018)\
**Post date:** [2024 年 11 月 26 日午後 12:01 UTC](https://www.nocode-faq.com/t/topic/4416/3 "2024-11-26T12:01:10Z")

</div>

ご確認いただきありがとうございます。

試してみましたが、途中わからずAppStateを使ってレッスン購入情報を次のスクリーンに引き継ぐ方法を教えて欲しいです。

試したやり方としては、  
作成するレッスン購入情報（コレクションはLessonPurchase）のドキュメントリファレンスで作成しました。が、その後のやり方がわかりませんでした、、、。

 ![スクリーンショット 2024-11-26 20.41.05](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/d/db4f2353c033f0579adef406f1ed6fe3423726b3.png)

下のレッスン購入確認のボタンのアクションで作成する購入情報をどのように引用するかがわかっていないです。

 ![スクリーンショット 2024-11-26 20.55.11](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/8/8f4703f68fefb24974d2fd047181690823e6255d.png)  
 ![スクリーンショット 2024-11-26 20.49.15](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/6/6ceff376608fed34b2a026190d7f66204ee9bc1a.jpeg)

非常にわかりにくい私の状況説明かと思いますが、ご確認いただけますと幸いです。

※AppStateの参考動画や資料が少なく、おすすめの教材コンテンツがあれば教えていただけるとお嬉しいです。

---

<div class="post-metadata">

**Author:** ![tsubasa](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/tsubasa/32/8670_2.png) [@tsubasa](https://www.nocode-faq.com/u/tsubasa)\
**Post date:** [2024 年 11 月 27 日午前 7:55 UTC](https://www.nocode-faq.com/t/topic/4416/4 "2024-11-27T07:55:15Z")

</div>

基本は、シンプルな動作なので、以下の通りで

1. **AppStateの役割**  
AppStateは、ローカル側で、  
ユーザー登録情報などを引き継ぐために使用されます。

2. **具体的な手順**

- **レッスン購入時** :  
レッスン購入情報（`LessonPurchase`）をAppStateにセットします。

- **購入確認画面** :  
購入確認画面では、前の画面でセットしたAppStateの値を呼び出して表示させます。

例えば、添付のテキストウィジェットにAppstateの値を表示させたい場合は、以下の画像部分から選びます。

 ![image](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/5/55bfcd6f55a75b2c3e86c29afb513a61222d7be1.png)

1. **参考情報**  
今回のところに、ちょうど該当は、しないですが、以下のNoCodeStudyでAppstateの説明はしてますよ。

> **[簡単なアプリを作りながらFlutterFlowの機能を覚えよう](https://www.nocode-study.com/programs/flutterflow-functions?category_id=134262)**
>
> FlutterFlowの簡易アプリを作りながら、使える機能を覚えませんか？コードはAIが生成してくれるので、必要最低限の知識のみで、ローコードを使いこなすことができます。データベースを繋がないので、設定に迷うこともありません。FlutterFlowを使ったアプリ開発に興味ある方の参考になれば幸いです。

---

<div class="post-metadata">

**Author:** ![yuchimusic1018](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/yuchimusic1018/32/6466_2.png) [@yuchimusic1018](https://www.nocode-faq.com/u/yuchimusic1018)\
**Post date:** [2024 年 11 月 27 日午前 11:52 UTC](https://www.nocode-faq.com/t/topic/4416/5 "2024-11-27T11:52:18Z")

</div>

何度も本当にすみません。

毎回丁寧にご回答いただき本当ありがとうございます！

私の説明が本当に下手なので本当に伝えたかったところが伝えきれていなかったかもしれません。  
①購入内容の確認画面

購入確定で初めてレッスン購入情報が作成されます。

 ![スクリーンショット 2024-11-27 20.38.15](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/0/0581f555881de069ff046b6188dd0d3857a35938.png)

購入確定のアクションでBackend Callでレッスン購入情報（Collection：Lesson Purchase）を  
作成する形です。

 ![スクリーンショット 2024-11-27 20.45.43](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/d/d1d35d3e09dda76a151f7185c245ebdb88344e92.png)

②購入完了  
**前の画面で作成したレッスン購入情報をこの画面で参照したいです。**

 ![スクリーンショット 2024-11-27 20.48.24](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/4/4493e1e4ff07410c0e0cf1a0fcbb1338ad21d98b.png)

上記内容をApp Stateで実現させるということが可能ということでしょうか。  
お手数おかけしますが、ご確認の程何卒よろしくお願いいたします。

---

<div class="post-metadata">

**Author:** ![yuchimusic1018](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/yuchimusic1018/32/6466_2.png) [@yuchimusic1018](https://www.nocode-faq.com/u/yuchimusic1018)\
**Post date:** [2024 年 11 月 29 日午前 11:17 UTC](https://www.nocode-faq.com/t/topic/4416/6 "2024-11-29T11:17:38Z")

</div>

@tsubasa  
すみません、メンションつけられてなかったです。  
大変お手数ですが、ご確認いただけますでしょうか。  
よろしくお願いいたします。

> [@yuchimusic1018](#):
>
> 何度も本当にすみません。
> 
> 毎回丁寧にご回答いただき本当ありがとうございます！
> 
> 私の説明が本当に下手なので本当に伝えたかったところが伝えきれていなかったかもしれません。  
> ①購入内容の確認画面
> 
> 購入確定で初めてレッスン購入情報が作成されます。
> 
> ![スクリーンショット 2024-11-27 20.38.15](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/0/0581f555881de069ff046b6188dd0d3857a35938.png)
> 
> 購入確定のアクションでBackend Callでレッスン購入情報（Collection：Lesson Purchase）を  
> 作成する形です。
> 
> ![スクリーンショット 2024-11-27 20.45.43](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/d/d1d35d3e09dda76a151f7185c245ebdb88344e92.png)
> 
> ②購入完了  
> **前の画面で作成したレッスン購入情報をこの画面で参照したいです。**
> 
> ![スクリーンショット 2024-11-27 20.48.24](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/4/4493e1e4ff07410c0e0cf1a0fcbb1338ad21d98b.png)
> 
> 上記内容をApp Stateで実現させるということが可能ということでしょうか。  
> お手数おかけしますが、ご確認の程何卒よろしくお願いいたします。

---

<div class="post-metadata">

**Author:** ![tsubasa](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/tsubasa/32/8670_2.png) [@tsubasa](https://www.nocode-faq.com/u/tsubasa)\
**Post date:** [2024 年 11 月 29 日午後 12:38 UTC](https://www.nocode-faq.com/t/topic/4416/7 "2024-11-29T12:38:27Z")

</div>

申し訳ないです。返信遅れました。

ちょっと僕も勘違いしてました。つまり、直前でCreateしたDocumentを表示したいってことですね。  
Appstateでもできますが、それであれば、シンプルに、”その作ったDocument”を表示させる方がシンプルです。

こんなイメージですよね？  
 ![055795364cfa02abb3ad94e6f8c3289d](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/3/3601f4b66187e90baf6baa54c6f91a9612e89510.gif)

やり方としては、

### **動作の流れ**

1. ユーザーが「購入確認」ページで情報を確認し、「購入」ボタンを押すと、Firestoreに新しいドキュメントが作成されます。
2. `Create Document` アクションで作成したドキュメントの参照をパラメーターで「購入完了」ページに渡し、即座にその情報を表示します。

構築方法

### **ステップ1: 表示するページ「購入完了」にPage Parametersを設定**

1. **購入完了** ページを選択します。
2. ページの設定画面を開き、 **Page Parameters** セクションに以下の項目を追加します：

- **Parameter Name:** `documentReference`
- **Type:** Firestore Document Reference

これにより、「購入完了」ページは、購入確認ページで作成したFirestoreドキュメントの参照を受け取れるようになります。

 ![image](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/d/d69eb276090f6d56781aaf1f1f8b57f552e09383.png)

 ![image](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/1/1cf6b6ee4da8a62526ec55aa42433f6fb9d2e060.png)

### **ステップ2: ドキュメント参照を渡す設定**

1. 「購入確認」ページでドキュメントを作成するアクション（例: ボタン押下時に実行される `Create Document` アクション）を設定します。
2. `Create Document` アクションを設定し、Firebaseに新しいドキュメントを作成します。
3. `Create Document` の設定で、以下の値を取得できることを確認します：

- \*\*Document \*\*: 作成したドキュメントの参照

1. 次に、「購入完了」ページに遷移する `Navigate to` アクションを追加します。

- **Action:** Navigate to
- **Page:** 購入完了
- **Parameters:**
  - **document** に `Create Document` アクションの `Document Reference` を指定します。

 ![image](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/4/46f81affc6c281c045663ec8657ea7502721db34.png)

### **ステップ3: 表示するデータの設定（購入完了ページ）**

1. 「購入完了」ページでデータを設定します。  
２．表示させたいウィジェットを選択し、パラメーターから表示させます。

 ![image](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/5/58a915d915be76ca1ac0fd7ee711304f168468aa.png)

勘違いしてたのは、FirebaseへCreateする前に表示したいのだと思ってました。すでにCreateしたドキュメントを表示したいのであれば、Parameterを使うのが一般的です。（Appstateは、Firebaseに関係なくデータを保持するときに使います）

ちょっと、この辺の概念慣れないと難しいかもしれないですね。  
毎週水曜日 20:00のFlutterFlowもくもく会で口頭で説明も可能ですよ。

【参考】

# FlutterFlowでリストから選んだものを次のページに表示させる方法（次のページにデータを送る）

> **[FlutterFlowでリストから選んだものを次のページに表示させる方法（次のページにデータを送る）](https://tsubasa.tech/archives/1064)**
>
> 今回は、Flutterflowでリストから選んだものを次のページに表示させる方法です。Dataを次のページに送る方法を説明します。

【参考】passing-data

> **[Passing Data | FlutterFlow Documentation](https://docs.flutterflow.io/concepts/navigation/passing-data/)**
>
> Learn how to pass data between pages in FlutterFlow.

---

<div class="post-metadata">

**Author:** ![yuchimusic1018](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/yuchimusic1018/32/6466_2.png) [@yuchimusic1018](https://www.nocode-faq.com/u/yuchimusic1018)\
**Post date:** [2024 年 11 月 29 日午後 9:59 UTC](https://www.nocode-faq.com/t/topic/4416/9 "2024-11-29T21:59:55Z")

</div>

翼さん、いつも本当にありがとうございます。  
はい！！作成いただいた動画のイメージであっております！！！

手順で進めているのですが、何点か質問させていただきたいです。  
ーーーーーーーーーーーーーーーーーーーーーーーーーーーー

①購入完了画面のパラメータ設定画面から新しくパラメータを作成する際に、

- **Parameter Name:** documentReference
- **Type:** Firestore Document Reference  
か
- **Parameter Name:** documentReference
- \*\*Type: Document  
どちらでしょうか？

いただいた画像ではType Documentで選択されているようなのですが、ご確認いただきたいです。

一旦私としてはこのように設定しています。合っているかご確認いただけると助かります。

 ![スクリーンショット 2024-11-30 6.34.20](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/4/4693d78a608babe636c511e91fcb7cb81c33dea2.png)  
ーーーーーーーーーーーーーーーーーーーーーーーーーーーー  
②下記手順の設定方法がわかりません、

> **ステップ2: ドキュメント参照を渡す設定**  
> 3. `Create Document` の設定で、以下の値を取得できることを確認します：
> 
> - \*\*Document \*\*: 作成したドキュメントの参照

現状画像のような形でドキュメントを作成の手順は終わっているのですが、Create Docで作成した内容の参照をするにはどのようにしたら良いかわかっておりません。

 ![スクリーンショット 2024-11-30 6.56.58](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/c/c561307ab2ab5422cd0a23e692c40dfa3b97dba5.png)

本当に毎度お手数をおかけしてしまい申し訳ございませんが、回答いただけますと助かります。

---

<div class="post-metadata">

**Author:** ![tsubasa](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/tsubasa/32/8670_2.png) [@tsubasa](https://www.nocode-faq.com/u/tsubasa)\
**Post date:** [2024 年 11 月 30 日午前 4:35 UTC](https://www.nocode-faq.com/t/topic/4416/10 "2024-11-30T04:35:53Z")

</div>

@yuchimusic1018

1 Type Documentでお願いします。

2.参照のどの辺がわからないのかが、やや理解できてなく、スクリーンショットを見る限り、Navigateした時のパラメーターの送信方法がわからない？ということですかね？

このページでは、次のページ（購入完了）に作成した  
Documentを渡せばOKです。

 ![image](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/b/bfe474eca67c66f063ebbcbcfd74121059f7aa4a.png)

設定は、この動画つくりましたので、こちらを見て頂けるとわかりやすいかと。  
 ![cf85f82f0b46808f412179aeafb00216](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/d/d762c46a014edc6c387b5db19c89c274f0a6c626.gif)

---

<div class="post-metadata">

**Author:** ![yuchimusic1018](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/yuchimusic1018/32/6466_2.png) [@yuchimusic1018](https://www.nocode-faq.com/u/yuchimusic1018)\
**Post date:** [2024 年 12 月 1 日午後 11:37 UTC](https://www.nocode-faq.com/t/topic/4416/11 "2024-12-01T23:37:17Z")

</div>

@tsubasa  
詳細な説明画面、ありがとうございます！

無事解決させることができました！！！！

Create Docでレッスン購入情報を作成し  
その際にAction Output Variable Nameにbuyrefと入れておくところですが、  
その実装方法は初めてでした、、、。

 ![スクリーンショット 2024-12-02 5.08.06](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/6/6b8c2751778f5be73ec7d921138d6d989f0ccadc.png)

非常に助かりました。  
いつもお忙しい中ご対応くださり、本当にありがとうございます。

---

<div class="post-metadata">

**Author:** ![tsubasa](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/tsubasa/32/8670_2.png) [@tsubasa](https://www.nocode-faq.com/u/tsubasa)\
**Post date:** [2024 年 12 月 2 日午前 4:23 UTC](https://www.nocode-faq.com/t/topic/4416/12 "2024-12-02T04:23:46Z")

</div>

良かったです～。ActionのOutPutを自分で作る、、っていうのは、確かにその概念が無いと気付かないかもしれませんね。

Output Variableは、例えば、  
ユーザーの選択したオプションで動的に条件分岐させる時にも使えるので、  
覚えておいて損は無いと思いますよ～。

今後も頑張ってくださいね。