flutter firestore将文档数据推送到详细信息屏幕
在Flutter中使用Firestore将文档数据推送到详细信息屏幕，可以按照以下步骤进行：
- 设置Firestore：确保你已经在Flutter项目中配置了Firebase和Firestore。
- 获取数据：从Firestore中获取文档数据。
- 导航到详细信息屏幕：将获取到的数据传递给详细信息屏幕。
以下是一个简单的示例，展示了如何实现这一过程：
1. 设置Firestore
首先，确保你已经在Flutter项目中配置了Firebase和Firestore。
2. 获取数据并显示在列表中
创建一个主屏幕，显示Firestore集合中的文档列表。
import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Firestore List'),
),
body: StreamBuilder(
stream: FirebaseFirestore.instance.collection('your_collection').snapshots(),
builder: (context, AsyncSnapshot<QuerySnapshot> snapshot) {
if (!snapshot.hasData) {
return Center(child: CircularProgressIndicator());
}
return ListView(
children: snapshot.data!.docs.map((document) {
return ListTile(
title: Text(document['title']),
subtitle: Text(document['subtitle']),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => DetailScreen(document: document),
),
);
},
);
}).toList(),
);
},
),
);
}
}3. 创建详细信息屏幕
创建一个详细信息屏幕，接收并显示传递过来的文档数据。
import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
class DetailScreen extends StatelessWidget {
final DocumentSnapshot document;
DetailScreen({required this.document});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(document['title']),
),
body: Padding(
padding: EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
document['title'],
style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
),
SizedBox(height: 16),
Text(
document['subtitle'],
style: TextStyle(fontSize: 18),
),
SizedBox(height: 16),
Text(
document['description'],
style: TextStyle(fontSize: 16),
),
],
),
),
);
}
}4. 运行应用
确保你已经在Firestore中创建了一个集合（例如your_collection），并在其中添加了一些文档，每个文档包含title、subtitle和description字段。
运行你的Flutter应用，你应该能够看到一个列表，点击列表项会导航到详细信息屏幕并显示相应的文档数据。
5. 完整代码
将上述代码片段组合在一起，形成一个完整的Flutter应用：
import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Firestore Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomeScreen(),
);
}
}
class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Firestore List'),
),
body: StreamBuilder(
stream: FirebaseFirestore.instance.collection('your_collection').snapshots(),
builder: (context, AsyncSnapshot<QuerySnapshot> snapshot) {
if (!snapshot.hasData) {
return Center(child: CircularProgressIndicator());
}
return ListView(
children: snapshot.data!.docs.map((document) {
return ListTile(
title: Text(document['title']),
subtitle: Text(document['subtitle']),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => DetailScreen(document: document),
),
);
},
);
}).toList(),
);
},
),
);
}
}
class DetailScreen extends StatelessWidget {
final DocumentSnapshot document;
DetailScreen({required this.document});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(document['title']),
),
body: Padding(
padding: EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
document['title'],
style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
),
SizedBox(height: 16),
Text(
document['subtitle'],
style: TextStyle(fontSize: 18),
),
SizedBox(height: 16),
Text(
document['description'],
style: TextStyle(fontSize: 16),
),
],
),
),
);
}
}这样，你就可以在Flutter应用中从Firestore获取数据并将其传递到详细信息屏幕了。
相关·内容
我需要单击列表，然后打开一个新的详细信息页面。我到处寻找如何做到这一点的例子，我找到了很多。但是，我的数据结构不同，即使我的代码没有错误，它也不会填充详细信息页面。index])));
}, 以下是详细信息页面： // details page
import 'package:flutter/mat
浏览 7提问于2019-12-08得票数 0
在Firestore中，我们需要使用类似于startAt或endAt和limit这样的东西来从集合中的文档列表中的给定点获取之前或之前的数据。我们需要两次获取相邻的文档(一次用于之前的数据，一次用于之后的数据)，然后我们需要将它们组合到列表中，这很容易出错 我想知道是否有一种方法可以在Flutter Firestore中获取相应的文档及其相邻文档(previousCount: 3, afterCount: 6); &
浏览 1提问于2020-08-04得票数 0
回答已采纳
1回答
我只想在Flutter中显示Firestore中的特定文档。为此，我尝试使用if语句，但只收到一个没有数据的空白屏幕。如果删除if语句，则会显示所有文档。
浏览 0提问于2021-04-17得票数 0
我一直在尝试学习flutter和编程。我这里有一个问题，我无法在论坛或其他任何地方找到解决方案。我想在此视图上显示FireStore文档的详细信息。上一个视图是Flutter的列表视图，仅显示标题。前一个视图(Main)将文档ID作为“partID”传递给该视图。我已经能够成功地查询该文档中的快照，甚至打印出特定的详细信息。但是，当我尝试将变量添加为表单域中的“现有文本”时，它无法识别它们。import '
浏览 2提问于2018-07-07得票数 0
回答已采纳
要在firestore中添加数据，代码如下： insta: 0我将logid存储在AsyncStorage中，并将其放到componentWillMount()中的另一个屏幕<
浏览 0提问于2018-07-27得票数 0
1回答
我们正在计划做一个实时应用程序，我们能够在应用程序中集成firestore，但是，使用firestore的官方flutter插件将数据发送到firestore平均需要1.2秒。我们还用插件提供的示例应用程序(Cloud_firestore)检查了这一点。https://docs.google.com/spreadsheets/d/1oJBTTbF8654EiFy5whMztWLBSQ8mViRIuE2T
浏览 23提问于2020-01-31得票数 2
回答已采纳
1回答
如何将数据作为流从一个屏幕传递到另一个屏幕？我有一个屏幕显示使用Firebase Stream (StreamProvider)的产品列表，当我单击一个产品时，我想转到另一个屏幕，在那里我可以显示产品详细信息。我希望将产品列表作为流传递到详细信息页面，以便我在详细信息屏幕上所做的任何更改都将自动更新firestore文档。products: products
浏览 21提问于2020-09-20得票数 0
1回答
我在我的flutter web应用程序中使用了以下依赖项和firebaseAuth和firestore： firebase_auth: ^3.1.3"></script>
我想在用户使用凭据登录后将屏幕导航到屏幕。实际上，在将用户角色保存到firestore用户数据中后，我想打开管理屏幕。因此，在这种情况下，登录当前用户的用户id应该与firestore<
浏览 2提问于2021-10-15得票数 0
Firebase-Firestore拒绝所有请求，而不是拒绝不符合数据Firebase-Firestore安全规则的特定文档 allow read: if authenticated() && resource.data.status== true || author(resource.data.creatorid) || admin(); 我试图实现的是只有status = true文档才会出现 错误 Unhandled Exception使用paginate_firestore
浏览 15提问于2021-08-25得票数 1
回答已采纳
我正在使用Dart，Flutter和Firebase制作一个应用程序。有注册/登录，我使用云firestore作为数据库。在我的云firestore中，用户UID是文档id，我有每个用户的特定数据(结果)。 我只想检索当前用户的数据(存储在Firestore中)并显示在屏幕上。//data is successfully stored in firestore.//n
浏览 19提问于2020-07-26得票数 1
回答已采纳
1回答
在下面你可以看到一个代码，我想在这里显示我从注册表格中收集到的数据。注册表单将数据推送到一个名为“user”的集合中，然后将其他一些文档数据推送为:名称-电子邮件等。正如您在XXXX中看到的，我希望我从云防火墙中检索的数据显示在小部件中:代码下面：import 'package:flutter/mate
浏览 3提问于2020-07-15得票数 1
回答已采纳
是否可以使用此数据结构将FCM发送到设备？当文档被创建时，函数被触发，但是我得到一个错误："token必须是非空字符串或数组“。我的代码可以修复吗?或者我正在尝试做的事情是不可能的？firebase-functions';admin.initializeApp();
const fcm = admin.messaging(
浏览 9提问于2020-03-26得票数 1
大家好，我正在制作一个基于flutter的实时聊天应用程序。我正在使用Firebase作为我的应用程序的后端，示例文本工作得很棒。我可以用flutter和firebase来做吗？
浏览 12提问于2020-09-02得票数 1
注册页面要求用户填写其姓名、电话号码和其他一些详细信息。
我不确定Flutter中的phone auth (OTP)是否可以用来创建一个用户以及他们在Firestore中的详细信息。或者它是否只能用于用户身份验证。如果可以使用电话号码(OTP) auth在Firestore中创建用户配置文件，请帮助。
我提到的大多数教程只说明如何使用
浏览 1提问于2020-07-12得票数 0
回答已采纳
1回答
移动应用程序上的颤振缓存修复记录
、、、、
我正在创建一个应用程序，使用的是Flutter &Google的Firestore数据库。这个应用程序使用Firebase的身份验证，所以一旦经过认证，我就从数据库中获取用户文档，并使用插件存储它。我这样做是为了减少对this的调用，因为我在许多屏幕上都使用这个文档。
问题是，我在许多地方更新文档，我必须记住更新文档的本地缓存版本，这并不理想。我的问题是，Firestore是否具有内置的缓存功能，以便如果<e
浏览 3提问于2020-07-14得票数 0
'', } 我试着降级cloud_firestore的版本，但仍然不起作用
浏览 22提问于2021-01-24得票数 0
回答已采纳
2回答
我首先执行一个查询，获得前30个“最喜欢”的帖子，并将其与该查询的最后一个文档一起发送给客户端。 接下来，当客户端加载更多文档时，我(尝试)查询接下来的30个文档。我将最后一个文档发回并尝试查询，但每次尝试要么失败，要么像以前一样加载相同的帖子。property 'firestore' of undefined"
//startData = new admin.firestore.DocumentSnapshot
浏览 35提问于2021-02-12得票数 0
回答已采纳
1回答
我调用此方法是为了从flutter应用程序中的firestore数据库中检索用户详细信息，当页面加载时，它将获得空值，但是在retrieved上，它确实给出了我所需的值，如何确保这些值应该被检索，并且应该最初只在屏幕上表示
浏览 5提问于2020-06-07得票数 0
回答已采纳
2回答
对于我在Flutter中构建的调度应用程序，我正在尝试使用云函数和cron作业将数据写入到我的云Firestore数据库中，以使我的应用程序更具自我维护性。我被困在第一步，试图让我的云函数将数据写入我的云Firestore数据库。
下面我在github上添加了图片的链接，这些图片展示了我当前的数据在Firestore中是如何构造的。我想要的是将命名文档添加到集合&
浏览 26提问于2019-11-07得票数 0
回答已采纳
我正在尝试将文档添加到我的云firestore数据库。以这种方式。E/flutter ( 6263): [ERROR:flutter/shell/common/shell.cc(181)] Dart Error: Unhandled exception:
E/flutter(package:flutter/src/services/message_codecs.dart:
浏览 1提问于2018-09-23得票数 6
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
