# Listviewでのfilter設定およびListtileのaction、遷移先ページのpageparameterの設定について

**URL:** <https://www.nocode-faq.com/t/topic/4324>\
**Category:** flutterflow\
**Tags:** バックエンドデータベース\
**Created:** [2024 年 7 月 14 日午前 10:06 UTC](https://www.nocode-faq.com/t/topic/4324 "2024-07-14T10:06:15Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![digi](https://avatars.discourse-cdn.com/v4/letter/d/8baadc/32.png) [@digi](https://www.nocode-faq.com/u/digi)\
**Post date:** [2024 年 7 月 14 日午前 10:06 UTC](https://www.nocode-faq.com/t/topic/4324/1 "2024-07-14T10:06:15Z")

</div>

・発生している問題  
●FlutterFlowにおいて、Listviewでのfilter設定およびListtileのaction、遷移先ページのpageparameterの設定が分からず困っております。  
お願いいたします。

・エラー  
Listtileのactionでparameterを設定し、遷移先ページのListviewでfiltersの設定を行ったが、適切な項目が表示されない

・現在行っている設定  
page1 Listview; Query type:Query Collection,Collection:title1,Query type:List of document

page1 Listtile; Action:Navigate to page2, Parameters:title 1 document, available options:reference

page2 Pageparameter; type:Document Reference, Collection type: title1

page2 Listview; Query type:Query Collection,Collection:title2,Query type:List of document,

page2 Listview Filters; Collection Field Name:title1, Reaction:Equal to, Value:page parameters→title1

・実装したい機能

●firestoreに保存したCSVファイル(example1)を用いて、ListViewに項目を表示させる(page1)

●page1のListTileを選択すると、別のページ(page2)に遷移する

●page2にもListViewがあり、これは別のCSVファイル(example2)を用いている。表示される項目は、page1で選択した項目によって規定される

●page2のListTileを選択すると、page3に遷移する。page3の内容はpage2と同じ仕様で、example13の項目がListViewに表示される。

実装したいアプリのプロトタイプ（A2の項目を参照してください）：

> **[Figma](https://www.figma.com/proto/F6BLOw4j3wKg3NNMy1aFVX/%E3%83%97%E3%83%AD%E3%83%88%E3%82%BF%E3%82%A4%E3%83%97?t=0Y9vo0EuOVV1X6kJ-1&node-id=1-39&starting-point-node-id=1%3A50)**
>
> Created with Figma

・スクリーンショット

順に、example1、example2、example3、page1のListview、page1のListtile、page2のpageparameter、page2のListviewの設定画面です。

 ![IMG_3365](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/5/529b6331db903f412076a45cfa14316a46baeb76.png)  
 ![IMG_3366](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/5/543056377a0f40a8d4dc94d3b32a47178696ed15.png)  
 ![IMG_3367](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/6/633ff5980c809cc56cb2835217e868e4f758646a.png)  
 ![IMG_3368](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/1/18334caae774a4971a1be927eaafcc777c7924b6.jpeg)  
 ![IMG_3369](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/f/f6d0c4e6a031098171867b5b50ea470ffd271516.jpeg)  
 ![IMG_3370](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/e/e3c1c9a4c3a405d574e0c554484ede8fa5cefe34.jpeg)

---

<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 年 7 月 16 日午前 1:30 UTC](https://www.nocode-faq.com/t/topic/4324/2 "2024-07-16T01:30:15Z")

</div>

いくつかのCollection内の複数のドキュメントを、選択した値に応じて、表示するListにフィルタリングしたいということですね。

どの部分が表示されないのかが、具体的によく分かってないですが、  
テキストをフィルタリングするという  
page2のListview の表示が一番ややこしそうなので、説明しておきます。

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

＊初期ページは、ドキュメントの数だけ表示しているので、A,B,Cが複数表示されてます。

> **[Gyazo Screen Video](https://gyazo.com/cf5e0481f82ffe8caf970ba12901501c)**
>
> Gyazo is the easiest way to record screenshots & videos you can share instantly. Save time with async visual communication that's effortless and engaging.

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

Page1には、ParameterをPage１からStringで持ってきます。

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

そのときに、Page２のListについては、作成したParameterに対してフィルタリングすることで、  
Listにフィルタリングがかかります。  
基本は、この動作の繰り返しで全ての機能が実装できるはずです。

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

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

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

パラメーターの詳細については、こちらのドキュメントが詳しいと思いますので、  
確認すると良いと思いますよ。

> **[Passing Data | FlutterFlow Docs](https://docs.flutterflow.io/data-and-backend/passing-data)**

---

<div class="post-metadata">

**Author:** ![digi](https://avatars.discourse-cdn.com/v4/letter/d/8baadc/32.png) [@digi](https://www.nocode-faq.com/u/digi)\
**Post date:** [2024 年 7 月 22 日午前 8:59 UTC](https://www.nocode-faq.com/t/topic/4324/3 "2024-07-22T08:59:28Z")

</div>

詳細な回答ありがとうございました。