在颤动中使用 StreamBuilder 时将数据传递到下一个屏幕

     2023-02-23     50

关键词:

【中文标题】在颤动中使用 StreamBuilder 时将数据传递到下一个屏幕【英文标题】:Passing data to the next screen while using StreamBuilder in flutter 【发布时间】:2020-07-26 07:27:58 【问题描述】:

我能够从 Card 小部件内的 firestore 获取数据,但无法详细说明 - 我的意思是将快照从第一个屏幕传递到第二个屏幕(从 BodySectionStream 页面到 DetailPage)。我尝试了很多但失败了。请查看我的代码并帮助我解决问题。提前致谢

class BodySectionStream extends StatefulWidget 

  @override
  _BodySectionStreamState createState() => _BodySectionStreamState();


class _BodySectionStreamState extends State<BodySectionStream> 

  final firestore = Firestore.instance;



  navigateToDetail( AsyncSnapshot post) 
    Navigator.push(
        context,
        MaterialPageRoute(
            builder: (context) => DetailPage(
                  news: post,
                )));
  


  @override
  Widget build(BuildContext context) 


    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Container(
        child: Column(
          children: <Widget>[
            Align(
              alignment: Alignment.centerLeft,
              child: Container(child:
              Text('Prefernces', textAlign: TextAlign.left, style: TextStyle(
                fontWeight: FontWeight.w500, fontSize: 22.0, color: Colors.black),)),
            ),

            const SizedBox(height:10.0),

            StreamBuilder <QuerySnapshot>(
                stream: firestore.collection('news').snapshots(),
                builder: (context, snapshot) 
                  if (!snapshot.hasData) 
                    return Center (child: CircularProgressIndicator());
                   
                  else 
                    final posts = snapshot.data.documents;
                    List<Container> postWidgets = [];
                    for (var post in posts )
                      final postText = post.data['title'];
                      final postList = Container(
                      child:  GestureDetector(
                        onTap: () => navigateToDetail( post.data[index]),
                          child: Card(

                          child: Column(children: <Widget>[
                            Image.network(post.data['images'],),
                            Text(postText),
                          ],)
                        ),
                      )
                      );


                      postWidgets.add(postList);

                    
                    return Expanded(
                      child: ListView(
                        children: postWidgets,
                        ));
                  
                ),

          ],
        ),
      ),
    );
  

DetailPage - 我要传递数据的地方

class DetailPage extends StatefulWidget 
  final AsyncSnapshot news;

  DetailPage(this.news);

  @override
  _DetailPageState createState() => _DetailPageState();


class _DetailPageState extends State<DetailPage> 


  @override
  Widget build(BuildContext context) 
    return Scaffold(
      body: Container(
        child: Column(
         children: <Widget>[
           Text(widget.news.data['title'])
         ],
        ),
      ),
    );
  

【问题讨论】:

【参考方案1】:
final posts = snapshot.data.documents;

documents getter 返回一个List 类型的DocumentSnapshot,你在这里传递你的DetailPage 一个文档字段:

onTap: () => navigateToDetail( post.data[index]),

但是你想传递一个DocumentSnapshot 来访问DetailPage 中的title 字段,所以只需传递post

onTap: () => navigateToDetail(post),

并在 DetailPage 类中将 news 数据类型从 AsyncSnapshot 更改为 DocumentSnapshot

【讨论】:

我花了将近 4 个小时来解决这个问题,而您在 5 分钟内完成了。万分感谢。完美运行。再次感谢

如何在颤动中直接将数据从 StreamBuilder 获取到 GridView 中?

】如何在颤动中直接将数据从StreamBuilder获取到GridView中?【英文标题】:HowtogetdatafromtheStreamBuilderintotheGridViewdirectlyinflutter?【发布时间】:2021-09-2109:03:23【问题描述】:您好,我正在设置个人资料页面,我正在尝试从Firestore获取... 查看详情

使用 StreamBuilder 获取 Firestore 文档,其中包含颤动中的地图列表

】使用StreamBuilder获取Firestore文档,其中包含颤动中的地图列表【英文标题】:useStreamBuildertofetchFirestoredocumentwhichcontainslistofmapinflutter【发布时间】:2020-10-2020:49:25【问题描述】:我想从我的Firestore集合中读取具有以下格式的数据... 查看详情

过滤 Streambuilder/listviewBuilder 颤动

】过滤Streambuilder/listviewBuilder颤动【英文标题】:filteringStreambuilder/listviewBuilderflutter【发布时间】:2020-10-1818:32:41【问题描述】:我是Flutter的新手,我一直在尝试创建一个基于用户选择刷新ListView.builder的函数。我将城市名称作... 查看详情

如何使用 BLoC 在颤动的屏幕之间传递数据?

...我在五个屏幕中执行此操作,也在TextFormFields中使用BLoC和StreamBuilder。当所有数据都填满后,我通过BloC将所有这些发送到我的API。问题是:当我传递到第二 查看详情

如何在颤动中每 x 秒从 api 获取数据?

...还想在数据更改时为小部件设置动画。我尝试使用Stream和StreamBuilder。这是获取实时数据的最佳方式.请帮帮我。这是我的代码。classPostfinalStringt 查看详情

StreamBuilder snapshot.hasError 在键盘显示/隐藏颤动时显示多次

】StreamBuildersnapshot.hasError在键盘显示/隐藏颤动时显示多次【英文标题】:StreamBuildersnapshot.hasErrorshowmanytimeswhenkeyboardshow/hideflutter【发布时间】:2019-05-3007:28:07【问题描述】:我有一个登录屏幕,我正在使用BloC模式,但是当我单... 查看详情

在颤动中合并来自 Firestore 的流

...时间】:2018-12-1506:55:15【问题描述】:我一直在尝试使用StreamBuilder或类似的方式收听Firestone的多个专辑。当我只使用一个Stream时,我的原始代码是:import\'package:flutter/cupertino.dart\';import\'package:f 查看详情

如何存储流数据并在颤动列表视图中显示新的和旧的?

...述】:我正在尝试显示来自RedditAPI的评论流。我正在使用Streambuilder在内容到达时对其进行流式传输并将其显示为列表视图事情是我只能查看当前的流内容,并且随着新的流内容 查看详情

在 Flutter 和 Firestore 中使用新数据更新 StreamBuilder

】在Flutter和Firestore中使用新数据更新StreamBuilder【英文标题】:UpdatingaStreamBuilderwithnewdatainFlutterandFirestore【发布时间】:2021-02-0723:26:18【问题描述】:我在Flutter中使用StreamBuilder来获取firestore集合users的实时更新。我想按年龄过滤... 查看详情

颤动firebase检查集合是不是为空

...我想知道如何检查集合是否在Firestore上没有文档?编辑:StreamBuilder<QuerySnapsho 查看详情

Flutter StreamBuilder中使用的Firestore快照在数据更改时永远不会更新

】FlutterStreamBuilder中使用的Firestore快照在数据更改时永远不会更新【英文标题】:FirestoresnapshotusedinflutterStreamBuildernevergetsupdatedwhendatachanges【发布时间】:2020-07-0219:24:02【问题描述】:我是一个颤抖的菜鸟,试图用一些例子来工... 查看详情

在 Flutter 中使用 streamBuilder 时条件不起作用

】在Flutter中使用streamBuilder时条件不起作用【英文标题】:ConditiondoesnotworkwhenusingastreamBuilderinFlutter【发布时间】:2020-11-2707:03:00【问题描述】:我正在尝试实现一个显示来自Firebase的数据的屏幕,但我希望streambuilder检查数据库是... 查看详情

如何在 Firebase + Firestore + Flutter 中使用 StreamBuilder 将所有子集合数据获取到 Widget

】如何在Firebase+Firestore+Flutter中使用StreamBuilder将所有子集合数据获取到Widget【英文标题】:HowtogetallsubcollectiondatatoWidgetwithStreamBuilderinFirebase+Firestore+Flutter【发布时间】:2021-10-0320:18:42【问题描述】:在Flutter中,我使用FirebaseFirest... 查看详情

颤动中的Firebase分页

...法来实现firebase分页以限制多少从后端检索文档。我使用streamBuilder并将下面的Query作为流传递:str 查看详情

在一个 StreamBuilder 中使用 2 个不同的流

】在一个StreamBuilder中使用2个不同的流【英文标题】:Use2differentstreamsinoneStreamBuilder【发布时间】:2019-09-0615:42:11【问题描述】:在一个StreamBuilder中使用2个不同的流是否可行,或者我应该如何解决这个问题?我尝试为它们两个使... 查看详情

如何在 Flutter 中使用 Firestone 的 streambuilder 获取嵌套文档?

】如何在Flutter中使用Firestone的streambuilder获取嵌套文档?【英文标题】:HowtofetchnesteddocumentsusingstreambuilderfromFirestoneinflutter?【发布时间】:2021-02-2823:26:55【问题描述】:我的数据以嵌套形式存储,例如集合->文档->集合->文... 查看详情

颤动如何让gridview显示像按钮这样的firebase数据

...布时间】:2019-09-1012:44:13【问题描述】:我正在尝试使用Streambuilder来显示gridview,但它返回此错误,我正在调用方法classList()到脚手架主体中的容器数据库=FirebaseDatabase.instance我 查看详情

在 Streambuilder 中的集合上使用 where() 不断返回 null

】在Streambuilder中的集合上使用where()不断返回null【英文标题】:Usingwhere()onacollectioninStreambuilderkeepsreturningnull【发布时间】:2021-03-0312:36:02【问题描述】:我正在尝试在集合中查找符合特定条件的所有文档,并将其保存在Streambuild... 查看详情