首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Flutter Firebase Firestore获取特定数据并将其分配给变量并永久显示它们

Flutter是一种跨平台的移动应用开发框架,它可以让开发者使用一套代码同时构建iOS和Android应用。Firebase是Google提供的一套云端开发平台,其中包含了多个服务,包括Firestore。

Firestore是Firebase提供的一种NoSQL文档数据库,它具有实时同步、可扩展性和安全性等特点。在Flutter中使用Firestore可以实现数据的存储和读取。

要获取特定数据并将其分配给变量并永久显示它们,可以按照以下步骤进行操作:

  1. 引入Firebase和Firestore的依赖:在Flutter项目的pubspec.yaml文件中添加firebase_core和cloud_firestore依赖。
  2. 初始化Firebase:在Flutter应用的入口处,使用Firebase.initializeApp()方法初始化Firebase。
  3. 获取Firestore实例:使用FirebaseFirestore.instance获取Firestore的实例。
  4. 查询特定数据:使用Firestore实例的collection()和doc()方法指定集合和文档的路径,然后使用get()方法获取文档的数据。
  5. 将数据分配给变量并显示:将获取到的数据分配给相应的变量,并在Flutter界面上进行展示。

以下是一个示例代码:

代码语言:txt
复制
import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:cloud_firestore/cloud_firestore.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Firestore Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final FirebaseFirestore firestore = FirebaseFirestore.instance;
  final String collectionPath = 'your_collection_path';
  final String documentId = 'your_document_id';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Firestore Demo'),
      ),
      body: Center(
        child: FutureBuilder<DocumentSnapshot>(
          future: firestore.collection(collectionPath).doc(documentId).get(),
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              // 获取到数据
              var data = snapshot.data!.data();
              // 将数据分配给变量
              var variable1 = data['variable1'];
              var variable2 = data['variable2'];
              // 在界面上显示变量的值
              return Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text('Variable 1: $variable1'),
                  Text('Variable 2: $variable2'),
                ],
              );
            } else if (snapshot.hasError) {
              // 获取数据出错
              return Text('Error: ${snapshot.error}');
            } else {
              // 正在获取数据
              return CircularProgressIndicator();
            }
          },
        ),
      ),
    );
  }
}

在上述代码中,需要替换your_collection_pathyour_document_id为实际的集合路径和文档ID。通过调用Firestore实例的collection()和doc()方法,可以指定要查询的集合和文档。然后使用get()方法获取文档的数据,并将数据分配给相应的变量。最后,在界面上使用Text组件展示变量的值。

推荐的腾讯云相关产品是腾讯云数据库(TencentDB),它提供了多种数据库类型,包括关系型数据库和NoSQL数据库,可以满足不同的业务需求。腾讯云数据库的产品介绍和文档可以在以下链接中找到:

腾讯云数据库产品介绍:https://cloud.tencent.com/product/cdb

腾讯云数据库文档:https://cloud.tencent.com/document/product/236

请注意,以上答案仅供参考,具体实现方式可能因个人需求和项目结构而异。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Flutter 2.8正式版发布了,还不来看看

应用内存 由于 Flutter 会尽可能快地加载 Dart VM 的服务 isolate,并将其和绑定在应用内的 AOT 代码一加载到内存中,这会导致 Flutter 开发人员在部分内存 有限制的设备上难以追踪内存指标...选择此标签会显示你的应用启动的个人资料数据。...服务,方便线上使用和体验 更方便构建认证和在实时查询 Firestore 数据的 UI 界面 Flutter 中使用 Firestore Object/Document 映射的支持进入 Alpha 版...在 DartPad 中使用 Firebase 由于我们可以只在 Dart 代码中初始化使用 FlutterFire,那 DartPad 自然也就支持使用 Firebase 啦: 这里有一个使用 Flutter...以下是 Flutter 团队对每个渠道的计划: Stable 渠道: 代表我们拥有的最高质量的构建。它们每季度(大致)发布一次,针对中间的关键问题进行热修复。

22.3K30

Flutter 移动端架构实践:Widget-Async-Bloc-Service

输入的数据(读取):将来自Firestore文档的键值对的流转换为强类型的不可变数据Model。 数据输出(写入):将数据Model转换为键值对,以便写入Firestore。...将其聚集在一起:使用Provider包 一旦我们定义了BLoC和Service,我们就需要将其与控件相关联。 这段时间以来,我一直在使用 Remi Rousselet 的 Provider 包。...以下是我用FlutterFirebase实现的身份验证流程的示例: [image] 观察到的结果: 当触发了登录事件,我们禁用了所有按钮显示CircularProgressIndicator,我们将加载状态设置为...本文源码 Flutter & Firebase构建的身份验证流程: https://github.com/bizz84/firebase_auth_demo_flutter 接下来的这个项目,它针对我的...FlutterFirebase Udemy课程中相关深入的资料进行了补充,链接如下: FlutterFirebase:构建一个完整的iOS和Android的应用程序

16K20

如何使用React和Firebase搭建一个实时聊天应用

使用Firebase Authentication来实现用户登录和注册功能,使用react-firebase-hooks/auth来获取用户状态。...使用Cloud Firestore来存存储和同步聊天室消息,使用react-firebase-hooks/firestore获取消息数据。...使用Chatbox组件来显示聊天室界面,使用Message组件来显示每条消息。为了方便您理解这些步步骤,我提供了一些代码示例,附上相关的链接。代码示例仅供参考,需要根据自己的需求进行修改。.../firebase";const firestore = firestore();然后,在src文件夹下打开Chatbox.js文件,在其中导入firestore模块,使用它来获取聊天室消息数据:import...每当rooms集合有新的数据时,它会更新messages状态,使其包含最新的聊天室消息。然后,它使用一个无序列表来显示每条消息,使用Message组件来渲染每条消息的内容。

46941

2023 Google 开发者大会:Firebase技术探索与实践:从hello world 到更快捷、更经济的最佳实践

在构建时,你可以使用Google中的很多后端架构,以此来加速应用的开发,比如你可以在FireBase中使用Cloud Firestore,Extensions,App Check,Cloud Function...,如下: 在项目的预览页,我们可以看到这样的一个页面 这是一个静态的页面,下面我们使用Firebase来实现一些动态的内容,这些内容包括, 身份验证,登录 数据保存,将结构化的数据保存到云端...使用Firebase安全规则保护你的数据库 要做实现这些功能,我们需要先创建Firebase项目,登录控制台,创建项目,选择一些自己要集成的服务。...我们需要开启这些服务 启用电子邮件登录以进行 Firebase 身份验证 设置 Cloud Firestore 项目中集成Firebase 为了让前端应用程序使用 Firebase,我们需要将 Firebase...可以从 Google 的 CDN 添加库,也可以使用 npm 在本地安装它们,然后将它们打包到应用程序中。

31660

如何用TensorFlow和Swift写个App识别霉霉?

客户端会将照片上传至 Cloud Storage,它会触发一个用 Node.js 提出预测请求的 Firebase 函数,并将结果预测照片和数据保存至 Cloud Storage 和 Firestore...,以 base64 将其编码,然后发送至 ML Engine 用于预测。...然后我将添加了边框的新照片保存至 Cloud Storage,写出照片到 Cloud Firestore 的文件路径,这样我就能读取路径,在 iOS 应用中下载新照片(带有识别框): const admin...= require('firebase-admin'); admin.initializeApp(functions.config().firebase); const db = admin.firestore...下面就为你总结一下几个重要步骤: 预处理数据:收集目标的照片,用 Labelling 为照片添加标签,生成带边界框的 xml 文件。然后用脚本将标记后的图像转为 TFRecord 格式。

12.1K10

用 awaitasync 正确链接 Javascript 中的多个函数

然后我们需要 async 函数 getEmailOfCourseWithCourseId() 从Firestore获取课程的电子邮件地址。...我们不知道从 Firestore 获取内容需要多长时间,因此它是 async 的,我们需要运行接下来的两个函数返回(或以 promise 解析)courseEmail 。...最后,在运行 saveToCloudFirestore() 和 sendEmailInSendgrid() 返回它们的值之前,不能发送 res.send(),否则我们的整个云函数将在工作完成之前中断。...为此,我们将 saveToCloudFireStore() 和 sendEmailInSendgrid() 响应(它们返回的内容)保存到变量中,其唯一目的是标记上述函数何时完成。...此外,数据库代码不能原封不动的复制 —— 它仅用于说明目的! 原文:https://nikodunk.com/how-to-chain-functions-with-await-async/

6.3K30

TensorFlow Lite,ML Kit 和 Flutter 移动深度学习:6~11

如果该值小于 0.20,则认为该登录名是恶意的,并且屏幕上将显示以下消息: 现在,让我们看一下在 Flutter 应用中部署模型的步骤: 首先,由于我们正在获取数据并且将使用网络调用(即 HTTP 请求...如果填充了mdict参数,则将结果分配给它。 数据集说明和加载 为了解决这个问题,我们将使用预训练的数据集,即 VGG 神经网络的再训练系数和 Imagenet 数据集。...从鸟瞰图可以用下图描述该项目: 将低分辨率图像放入模型中,该模型是从 Firebase 上托管的 ML Kit 实例中获取的,放入 Flutter 应用中。...它从G获取生成的图像,尝试将其分类为真实图像(存在于训练样本中)或生成图像(不存在于数据库中)。 通过反向传播,GAN 尝试不断减少判别器能够对生成器正确生成的图像进行分类的次数。...该功能随机排序特定用户的图片并将其显示给其他人。 支持该功能的算法分析了向左或向右滑动图片的频率。 它使用该知识根据图片的受欢迎程度对其重新排序。

23K10

TensorFlow Lite,ML Kit 和 Flutter 移动深度学习:1~5

该 API 利用了 Firebase 上托管的预训练模型的功能,并为应用提供了识别面部关键特征,检测表情获取检测到的面部轮廓的功能。...要获取有关特定包的信息,请访问这里。...成功获取用户选择的图像后,我们迁移到应用的第二个屏幕,在其中显示选择的图像。 此外,我们使用 Firebase ML Kit 标记在图像中检测到的面部。...如果与str_cloud相同(即 Cloud Vision API),则分配给变量a的值为0; 否则,分配给变量a的值为1。...但是,由于我们在生成句子时需要它们,因此我们不会将其删除。 训练 在以下步骤中,我们加载训练测试图像数据对其进行训练: 现在,将分离的训练和测试文件加载到数据集中。

18.4K10

泄露2.2亿条数据,谷歌Firebase平台数据库被100%读取

对于每一个暴露的数据库,Eva 的脚本 Catalyst 会检验哪些类型的数据是可获取的,抽取了 100 条记录作为样本进行分析。...在 Firestore 数据库中,如果管理员设置了一个名为 ‘password’ 的字段,并将密码数据以明文形式存储在其中,那么用户的密码就有可能暴露。...向网站所有者发出警告 在对样本数据进行分析后,研究人员尝试向所有受影响的公司发出警告,提醒它们注意安全不当的 Firebase 实例,13 天内共计发送了 842 封电子邮件。...起初,他们使用 MrBruh 制作的 Python 脚本进行扫描,以检查网站或其 JavaScript 捆绑程序中的 Firebase 配置变量。...为了自动检查 Firebase 中的读取权限,研究小组使用了 Eva 的另一个脚本,该脚本会抓取网站或其 JavaScript,以便访问 Firebase 集合(Cloud Firestore NoSQL

10610

Firebase In-App Messaging 应用内消息

举例:玩游戏通过某个关卡时发送应用内消息促使他们完成重要的应用内操作 应用内消息可以自定义,使其显示为卡片、横幅、模态窗口或图片,设置触发器,使其在合适时机出现 In-App Messaging 的集成...这可能会使测试难以进行,因此 Firebase 控制台允许您指定一部测试设备来按需显示消息。...iOS、Android、flutter 相关处理,详情可见 In-App Messaging 用途 通过 Firebase 控制台可以修改消息的样式、定位和推送时间 Firebase In-App Messaging...修改 In-App Messaging 消息的行为 通过代码逻辑,可以定制应用内消息的行为:比如截获 In-App Messaging 消息,通过代码控制触发 In-App Messaging 消息,允许用户控制与消息交互相关的个人数据共享等等...,如果想暂停使用,可以通过代码修改,Android、flutter,详情可见 将该属性设置为 YES,应用内消息则无法显示,设置为 NO ,则可重新允许显示应用内消息。

27510

【干货】手把手教你用苹果Core ML和Swift开发人脸目标识别APP

下载解压缩校验文件后,您会看到它包含以下三个文件: ? 训练模型需要所有的这些文件,所以需要将它们放在我的云存储桶中的同一个data/目录下。 在进行训练工作之前,还需要补充一点。...Swift客户端将图像上传到云存储,这会触发Firebase,在Node.js中发出预测请求,并将生成的预测图像和数据保存到云存储和Firestore中。...将带有新框的图像保存到云存储,然后将图像的文件路径写入Cloud Firestore,以便在iOS应用程序中读取路径下载新图像(使用矩形): ? ?...最后,在我的iOS应用程序中,可以监听图像Firestore路径的更新。如果检测到,我会下载图像,并与检测分数一起显示在应用程序中。这个函数将替换上面第一个Swift代码片段中的注释: ?...在我的函数中,我向Firestore写预测元数据

14.7K60

[Flutter专题10]

因此,在 Flutter 中构建您的启动应用程序将为您节省大量时间,因为这些组件中的大多数都是现成的。 Flutter 保持一致的增长模型,当代码中的变量更新时, UI组件自动调整....代码可重用 程序员可以恢复应用程序代码并将其转换为适用于每个平台的各种编程语言。结果是移动应用程序开发的时间和金钱效率高的过程。...3、Flutter后端Firebase是初创企业的救星 Firebase 是由 Google 提供的稳定的后端解决方案,带有 Flutter。...与 Firebase 搭配使用时,Flutter 提供开箱即用且稳定的协助、托管解决方案、实时数据库、用户身份验证协议以及各种关键后端功能。...用于构建正确类型 UI 的智能 Flutter 库 在进行 Flutter 应用程序开发时,您可以根据 iOS、Android 和 Google Fuchsia 平台之间的差异获取对小部件的访问权限。

3.7K10

超实用!50+个ChatGPT提示词助你成为高效Web开发者(上)

Next.js是一个React框架,可以用来创建应用程序的前端,而Firebase可以用于后端,利用其各种服务,如Firestore数据库,Firebase Authentication进行用户管理,以及...后端 - Firebase: a. Firestore:这是Firebase提供的一个NoSQL数据库。你可以创建以下集合: - **Rooms**:用于存储酒店的所有房间。...Supabase使用的是PostgreSQL,这是一种关系数据库,与FirebaseFirestore(一种NoSQL数据库)不同。 a....Supabase数据库(PostgreSQL):你将使用表格而不是集合。你可以为房间、预订和用户设置表格,定义它们之间的关系。...然而,如果你的数据结构更加动态和灵活,或者你需要高度的读写扩展性,FirebaseFirestore可能会更适合。 此外,你还应考虑你的团队对这两种技术的熟悉程度。

56820

应用上云2小时烧掉近50万,创始人:差点破产,简直噩梦

如果我们步履蹒跚,我们想象的最糟糕的情况就是超出了每日免费Firestore限制。...醒来时,我读了几封来自Google Cloud的电子邮件,它们彼此之间在几分钟之内就发送完了。 第一封电子邮件:Firebase项目的自动升级 ? 第二封电子邮件:超出预算 ?...GCP和Firebase 1.将Firebase帐户自动升级到付费帐户 在注册Firebase时,我们从未想到过,也从未显示过。...可以想象,这导致1000个实例进行查询,每隔几毫秒写入一次Firebase DB。查看数据发布事件,我们发现Firebase读取在某一点上大约为每分钟10亿个请求! ?...这些指标仅可使用90天,而我们从这次事件中丢失了指标(这些天Firebase和Cloud Run的使用情况发生了巨大的变化),否则,我很乐意在本文中分享它们。 7 我们还活着 ?

42.7K10

2021年11个最佳无代码低代码后端开发利器

◆ Supabase 最适合那些正在建立生产级应用程序、熟悉SQL查询、重视开源、希望从一开始就有一个可扩展的解决方案的专家。 Supabase是一个开源的Firebase替代后端。...使用关系型数据库的好处是,它可以帮助你一直保持一致。 关系型数据库或SQL数据库是基于表的数据库。它们有预先定义的模式,使用结构化查询语言(SQL)来定义和操作数据。...非关系型或NoSQL数据库有动态模式。它们以文件的集合或多个集合的形式存储数据。 在使用Supabase时,你将在其图形用户界面(GUI)中度过大部分时间。...Firebase Firestore是谷歌的一个数据库服务。尽管Firestore在两年前才推出测试版,但它已经拥有一个巨大的社区。它是一个管理数据库,旨在支持无服务器应用开发。...因此,你可以使用在Bubble CMS内创建的相同数据表,将其与任何其他前端工具连接起来,例如,开发本地应用程序。

12.5K20

2017——国外SDK发展趋势

这类平台的佼佼者包括:Firebase(谷歌的 SDK)、HockeyApp(微软的 SDK)和 Facebook。它们均提供了全面的功能——从分析、后端到广告等。...Firebase 提供的功能覆盖了应用程序的全生命周期,还提供了实时数据库、崩溃报告、远程配置(A/B 测试)、认证机制和分析功能。...他们最近还推出了 Cloud FireStore,并把 Crashlytics 加入到产品套件中。...那些有复杂需求的大型企业(如沃尔玛)可能会选择特定的 SDK,他们有更多的预算和工程资源,可用于实现特定的 SDK,解决免费平台无法解决的问题。 另一个原因是开发者希望把他们的数据放在同一个地方。...开发者通过中介 SDK 接触到更多的广告主,确保长时间显示可以获得更多收入的广告,从而提高广告流量收入。

6.1K60

Flutter 日志最佳实践

本文将探索使用 Logger package 创建易于解析的 Flutter 日志,考虑日志级别,介绍如何使用 Crashlytics 获取持续(onGoing)的日志。...Flutter 项目中日志等级的重要性 Flutter 项目可以有很多日志,包括网络,数据库和错误。通常,开发者只需要适量的日志,忽略冗长的日志。但是,如果事情不起作用,你可能需要检查更详细的事件。...在发布模式的时候,显示哪些日志很有用。 我们继承 LogFilter 类,重写 shouldLog() 方法。...添加 firebase_crashlytics 依赖包 在你项目下运行下面命令行安装依赖包: flutter pub add firebase_crashlytics 2....总结 本文讨论了 Flutter 项目中日志的最佳实践。我们还学习了如何使用一个包创建简易的解析日志,考虑了日志等级,介绍了如何使用 Crashlytics 和类似的工具来持续获取日志。

4.7K20

Flutter2 来了!!!

Flutter是开放的,成千上万的贡献者添加了核心框架,通过软件包生态系统对其进行了扩展。 ?...单页应用程序(SPA),一次加载并与Internet服务之间进行数据传输。 将现有的Flutter移动应用程序带到Web上,从而为两种体验启用共享代码。...Flutter对网络的生产支持使iRobot可以利用其现有的教育编程环境并将其移至网络,从而将其可用性扩展到Chromebook和其他浏览器是最佳选择的设备。...我们还将宣布对Flutter插件的一些核心Firebase服务进行更新:身份验证,Cloud Firestore,Cloud Functions,Cloud Messaging,Cloud Storage...请访问Flutter 2上的独立技术博客,以获取有关许多新功能和性能改进的信息,我们认为这将使现有的Flutter开发人员满意,并立即下载。 ?

3.2K20
领券