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

Flutter:从Firestore下拉菜单中检索数据,并将选定的值上传回Firestore

基础概念

Flutter 是一个开源的 UI 软件开发工具包,用于构建跨平台的应用程序。Firestore 是 Firebase 提供的一种 NoSQL 数据库,用于存储和同步数据。

相关优势

  • Flutter: 跨平台开发,性能优越,丰富的 UI 组件库。
  • Firestore: 实时数据同步,灵活的数据结构,易于扩展。

类型

  • 下拉菜单: 用户界面元素,允许用户从预定义的选项列表中选择一个值。
  • 数据检索: 从数据库中获取数据的过程。
  • 数据上传: 将数据发送到数据库的过程。

应用场景

适用于需要实时数据交互的应用,如电子商务平台、社交媒体应用等。

示例代码

以下是一个简单的示例,展示如何在 Flutter 中从 Firestore 检索数据并上传选定的值。

1. 添加依赖

pubspec.yaml 文件中添加以下依赖:

代码语言:txt
复制
dependencies:
  flutter:
    sdk: flutter
  firebase_core: latest_version
  cloud_firestore: latest_version

2. 初始化 Firebase

main.dart 文件中初始化 Firebase:

代码语言: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(
      home: Scaffold(
        appBar: AppBar(title: Text('Firestore Example')),
        body: FirestoreDropdownExample(),
      ),
    );
  }
}

3. 创建下拉菜单并检索数据

代码语言:txt
复制
class FirestoreDropdownExample extends StatefulWidget {
  @override
  _FirestoreDropdownExampleState createState() => _FirestoreDropdownExampleState();
}

class _FirestoreDropdownExampleState extends State<FirestoreDropdownExample> {
  final TextEditingController _controller = TextEditingController();
  List<String> _options = [];
  String _selectedOption;

  @override
  void initState() {
    super.initState();
    fetchOptions();
  }

  Future<void> fetchOptions() async {
    QuerySnapshot snapshot = await FirebaseFirestore.instance.collection('options').get();
    setState(() {
      _options = snapshot.docs.map((doc) => doc['name']).toList();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        DropdownButtonFormField(
          value: _selectedOption,
          decoration: InputDecoration(labelText: 'Select an option'),
          items: _options.map((option) {
            return DropdownMenuItem(value: option, child: Text(option));
          }).toList(),
          onChanged: (value) {
            setState(() {
              _selectedOption = value;
            });
          },
        ),
        ElevatedButton(
          onPressed: () {
            uploadSelectedOption();
          },
          child: Text('Upload'),
        ),
      ],
    );
  }

  Future<void> uploadSelectedOption() async {
    if (_selectedOption != null) {
      await FirebaseFirestore.instance.collection('user_selections').add({
        'selected_option': _selectedOption,
        'timestamp': DateTime.now(),
      });
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Uploaded successfully')));
    }
  }
}

参考链接

常见问题及解决方法

1. 无法连接到 Firestore

原因: 可能是 Firebase 初始化失败或网络问题。

解决方法:

  • 确保 Firebase 配置正确。
  • 检查网络连接。

2. 数据检索失败

原因: 可能是 Firestore 查询语句错误或权限问题。

解决方法:

  • 检查查询语句是否正确。
  • 确保 Firestore 安全规则允许读取数据。

3. 数据上传失败

原因: 可能是网络问题或 Firestore 写入权限不足。

解决方法:

  • 检查网络连接。
  • 确保 Firestore 安全规则允许写入数据。

通过以上步骤和示例代码,你应该能够在 Flutter 中实现从 Firestore 下拉菜单中检索数据并上传选定的值。

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

相关·内容

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

应用内存 由于 Flutter 会尽可能快地加载 Dart VM 服务 isolate,并将其和绑定在应用内 AOT 代码一并加载到内存,这会导致 Flutter 开发人员在部分内存 有限制设备难以追踪内存指标...在 Flutter 2.8 版本,Android 设备 Dart VM 服务 isolate 已被拆分至单独 bundle ,可以单独加载,减少了在其加载前约 40MB 内存使用。...该配置文件包含了 Dart VM 初始化到第一帧 Flutter 渲染 CPU 样本。...平台视图是宿主平台向 Flutter 嵌入 UI 组件媒介。...服务,方便线上使用和体验 更方便构建认证和在实时查询 Firestore 数据 UI 界面 Flutter 中使用 Firestore Object/Document 映射支持进入 Alpha 版

22.4K30

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

然而,在构建完成并将它们一次次重构之后,我调整出了一种在我所有项目中都能够运行完好开发体系,因此,在本文中,我将介绍一种我定义架构模式: 现有的开发模式借鉴了很多思想; 调整它们以满足实际开发...显式 状态管理示例是 Flutter 计数器,当增量按钮被按下时,程序通过 setState() 对计数器进行递增。...换句话说,我们可以将Service视为 纯粹 功能组件, 它可以修改和转换第三方库收到数据。...输入数据(读取):将来自Firestore文档键值对流转换为强类型不可变数据Model。 数据输出(写入):将数据Model转换为键值对,以便写入Firestore。...无论如何,我发现BLoCs在使用Firestore构建app时效果非常明显,其中数据通过流后端流入app。 在这种情况下,通常将流进行组合或使用RxDart对其执行转换,BLoC很擅长这个。

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

    第一步:预处理照片 首先我谷歌上下载了 200 张 Taylor Swift 照片,然后将它们分成两个数据集:训练集和测试集。然后给照片添加标签。测试集用于测试模型识别训练未见过照片准确率。...除了将我模型和Cloud Storage数据连在一起外,配置文件还能为我模型配置几个超参数,比如卷积大小、激活函数和时步等等。...注意,你需要从本地克隆 tensorflow/models/research,该目录运行训练脚本。...在我 train/bucket ,我可以看到训练过程几个点中保存出了检查点文件: ? 检查点文件第一行会告诉我们最新检查点路径——我会本地在检查点中下载这3个文件。...客户端会将照片上传至 Cloud Storage,它会触发一个用 Node.js 提出预测请求 Firebase 函数,并将结果预测照片和数据保存至 Cloud Storage 和 Firestore

    12.1K10

    骑上我心爱小摩托,再挂上AI摄像头,去认识一下全城垃圾!

    垃圾GPS坐标通过简单gpsd接口usb模块读取,将数据存储在Google Firestore实时数据,这样本地Google firebase SDK就被用于客户端应用程序开发。...应用程序 现代数据分析应用程序必须支持任何设备和平台访问,而实时数据访问则需要使用适当后端技术和能够支持用户查询数据模型。...我们选择Ionic+Angular进行前端开发和谷歌Firestore坐标实时数据库。...选择数据模型允许我们快速检索检测到垃圾点列表,包括相关GPS坐标、集装箱/袋子/纸板数量、按区域和每小时粒度数据,其对分布式计数器支持还能让我们按小时和区域实时统计信息变得非常容易,不需要执行复杂查询...Firebase客户端SDK包括一个通用API,可用于订阅客户端应用程序,以添加/更新/删除 Firestore数据运行在VespAI应用程序产生活动。

    10.3K30

    我们弃用 Firebase 了

    的确,纯性能上讲,在 AWS/Azure/ GCP 构建定制化原生服务包优于 Firebase 套件。但是,当我们考虑到开发时间和维护成本时,Firebase 通常是一个合乎逻辑选择。...事实,Firebase 有许多方面是我们喜欢: 使用 Firestore,许多客户端状态管理方面的挑战都不复存在,特别是与数据新鲜度有关问题。 免费就可拥有的实时体验。...Firestore 文档 / 集合架构:它迫使人们仔细考虑数据建模。它还反映了一个直观导航方案。 Firestore 关系数据也是如此。...直接 Google Cloud Console 下载。 GCP 似乎正在蚕食 Firebase 开发环境。 运营角度来看,这是合理。...Supabase 最近,作为考察过程一部分,我们在 Supabase 开发了一些小项目。其开发体验令人愉快,特别是行级安全,那与 Firestore 规则类似,但更为强大。

    32.6K30

    Vue.js + Node.js + Express + MySQL示例:构建全栈CRUD应用程序

    用户可以创建,检索,更新,删除教程。 有一个搜索框,用于按标题查找教程。 下面是示例截图: 添加一个对象: ? 显示所有的对象: ?...在这个页面,你可以: 使用Publish/UnPublished按钮将状态更改成Published/Pending 使用Delete按钮MySQL数据删除对象 使用Update按钮更新数据对象详细信息...Vue客户端使用axios发送HTTP请求并获取HTTP响应,在组件中使用数据。 Vue路由器用于页面间导航。...接下来,我们在models/index.js添加MySQL数据配置,在models/tutorial.model.js创建Sequelize数据模型。 controller教程控制器。...在tutorial.routes.js处理所有CRUD操作(包括自定义查找器)路由。

    25K21

    用 awaitasync 正确链接 Javascript 多个函数

    我发现大多数关于链接多个函数文章都没有用,因为他们倾向于发布MSDN 复制粘贴不完整演示代码。...在云函数,你必须发送带有 res.send() 响应,否则函数会认为它失败并重新运行它。...然后我们需要 async 函数 getEmailOfCourseWithCourseId() Firestore获取课程电子邮件地址。...我们不知道 Firestore 获取内容需要多长时间,因此它是 async ,我们需要运行接下来两个函数并返回(或以 promise 解析)courseEmail 。...最后,在运行 saveToCloudFirestore() 和 sendEmailInSendgrid() 并返回它们之前,不能发送 res.send(),否则我们整个云函数将在工作完成之前中断。

    6.3K30

    应用程序崩溃,融资泡汤,我们三个程序员惨被祭天

    所以在听到这样要求时,开发团队同事们都感到非常沮丧,这代表着我们在接下来 40 多天里恐怕得天天加班了。 公司为项目选定了三名开发人员,我也是其中之一。...我们阵容为一名后端开发人员、一名 Flutter 移动开发人员,再就是前端 Web 开发人员(我)。 但我们还是按时完成了——带着大量 bug 完成。...在投资方面前展示时,这款应用毫不留情地在移动设备彻底崩溃。引发崩溃根源是一条文本字段——此字段只能容纳数字,但 CEO 却填进了数字加字符。...为了快速开发,我们使用 Firebase Cloud Firestore 保存数据。当用户移动前端向 Firestore 推送是字符串数据而非数字数据时,应用就会崩溃。...最后,我想提醒各位开发者朋友,千万不要在这种没有尊重、没有价值、而且压力巨大工作岗位浪费生命。如果我在那家公司再待六个月,换来不可能是任何有意义积累、只是永远无法挽回一段职业青春。

    1.7K10

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

    在构建时,你可以使用Google很多后端架构,以此来加速应用开发,比如你可以在FireBase中使用Cloud Firestore,Extensions,App Check,Cloud Function...总而言之,在FireBase开发,你能使用到所有可能用到应用。...,如下: 在项目的预览页,我们可以看到这样一个页面 这是一个静态页面,下面我们使用Firebase来实现一些动态内容,这些内容包括, 身份验证,登录 数据保存,将结构化数据保存到云端...可以 Google CDN 添加库,也可以使用 npm 在本地安装它们,然后将它们打包到应用程序。...在“用户”选项卡,我们应该会看到刚刚输入用于登录应用程序帐户信息。

    41760

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

    本文将带你最初数据处理开始教你一步一步实现一个“霉霉”检测器,来自动从一堆手机照片中找出“霉霉”。专知内容组编辑整理。...在Cloud ML引擎使用MobileNet训练模型; 4. 把训练好模型导出,并将其部署到ML引擎以提供服务; 5. 构建一个iOS前端,对训练过模型做出预测请求。...Swift客户端将图像上传到云存储,这会触发Firebase,在Node.js中发出预测请求,并将生成预测图像和数据保存到云存储和Firestore。...最后,在我iOS应用程序,可以监听图像Firestore路径更新。如果检测到,我会下载图像,并与检测分数一起显示在应用程序。这个函数将替换上面第一个Swift代码片段注释: ?...在我函数,我向Firestore写预测元数据

    14.8K60

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

    它还提供了一个SQL编辑器,你可以用它来编写自定义SQL查询,以操作表数据。 最令人喜欢特点之一是,它在创建数据库时就提供了一个随时可用REST API。...Firebase Firestore是谷歌一个数据库服务。尽管Firestore在两年前才推出测试版,但它已经拥有一个巨大社区。它是一个管理数据库,旨在支持无服务器应用开发。...定价 Spark计划 (免费):Firestore总存储数据为1GB Blaze计划(随用随付):总容量为1GB,每多存储1GB数据Firestore中加0.108美元。...它提供可编程服务,提供标准服务器功能。此外,它还支持认证用户管理、认证API请求、关系数据、推送通知、发布/订阅消息、地理位置、视频/音频记录、服务器直播、文件服务等。...定价 Back4app拥有最多价格选项,比这个名单任何其他后端平台都多。

    12.6K20

    Flutter web 最新进展: 发掘更多可能!

    Flutter 代码在浏览器运行,为我们带来了各种有趣可能性,包括: 让开发者们可以轻松将现有的应用移动端带向 Web 端 —— 不论是完整功能迁移版应用、PWA (Progressive.../templates 框架和 API 层面上来说,毫无疑问 Flutter 是以应用为中心。...△ Flutter "计数器" 模板应用, 在 macOS 作为 PWA 运行 请注意,虽然看起来像是一个普通桌面应用,但实际它是一个 Flutter web 应用,它已经作为 PWA 安装到了浏览器...感谢社区巨大贡献,例如: audioplayers: 同时播放多个音频文件 connectivity: 让应用发现网络连接并作出相应配置 cloud_firestore: 经由 Cloud Firestore...API 访问 NoSQL 云端数据库 cloud_functions: 使用 Firebase 提供 Cloud Functions 服务 您可以在这里找到以上 package https://pub.flutter-io.cn

    5K40

    Flow 操作符 shareIn 和 stateIn 使用须知

    您可以在 StateFlow 文档 查看更多相关信息。 两者之间最主要区别,在于 StateFlow 接口允许您通过读取 value 属性同步访问其最后发出。...现在要求我们保持监听位置更新,同时要在应用后台返回前台时在屏幕显示最后 10 个位置: class LocationRepository( private val locationDataSource...缓存数据 我们需求再次发生变化,这次我们不再需要应用处于后台时 持续 监听位置更新。不过,我们需要缓存最后发送项目,让用户在获取当前位置时能在屏幕看到一些数据 (即使数据是旧)。...以开源项目——Google I/O Android 应用 iosched 为例,您可以在 源码 看到, Firestore 获取用户事件数据流是通过 callbackFlow 实现。...如果您只允许一个用户,并且收集者需要更新为观察新用户,您可以向一个所有收集者共用 SharedFlow 或 StateFlow 发送事件更新,并将公共数据流作为类变量。

    4.6K20

    3 名程序员被开除:因一次 APP 崩溃。。。

    作者是一名女程序员,擅长编程、AI、数据科学和区块链等方面的开发。 我之前从来没有与别人讲过这个尴尬故事。 我现在从事是第三份工作。在之前两份工作,一次是我被解雇了,另一次是我主动辞职了。...我们不得不开足马力,每周六天至少四天在加班。但是公司并没有付我们加班费,甚至从来没有表示过谢意,好像我们加班就是理所应当。 这对开发人员来说是个危险信号。...一个是后端开发人员,一个是Flutter移动开发人员,另一个是前端Web开发人员(我)。 不过我们还是按时完成了工作,当然有bug。我们将这件事告诉了CTO和CEO。...该应用程序向投资人展示时在移动设备崩溃了,因一个文本字段而崩溃。该文本字段要求输入数字,但CEO结果输入却是数字和字符。...为了快速开发,我们使用了FirebaseCloud Firestore来保存数据。当用户移动前端将字符串数据而不是数字数据推送到Firestore时,应用程序崩溃了。

    2.2K20

    App、H5、PC应用多端开发框架Flutter 2发布

    我们目标是从根本改变开发人员对构建应用程序想法,不是你目标的平台开始,而是你想要创建体验开始。Flutter 让你手工制作美丽体验,你品牌和设计走到了最前沿。...事实,这些产品许多已经开始出货,包括Stadia、googleone和googlenest Hub。...Flitter对web生产支持使iRobot能够利用其现有的教育编程环境并将其移动到web,从而将其可用性扩展到Chromebooks和其他浏览器是最佳选择设备。...台式机、可折叠和嵌入式设备Flutter 2 除了传统移动设备和网络之外,Flutter 正越来越多地扩展到其他设备类型,我们在今天主题演讲重点介绍了三种合作关系,它们展示了Flutter 可移植性...成长Flutter生态系统 目前,Flutter和Dart软件包已超过15000个:亚马逊、微软、Adobe、阿里巴巴、eBay和Square等公司;到Lottie、Sentry和SVG等关键软件包

    8.9K30

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

    在这些网站,他们甚至发现了一家银行。 对于每一个暴露数据库,Eva 脚本 Catalyst 会检验哪些类型数据是可获取,并抽取了 100 条记录作为样本进行分析。...包含已曝光用户记录样本数据库 来源:xyzeva 所有详细信息都整理在一个私人数据,该数据库提供了公司因安全设置不当而暴露用户敏感信息数量概览: 姓名:84221169 条(约 8400 万条...在 Firestore 数据,如果管理员设置了一个名为 ‘password’ 字段,并将密码数据以明文形式存储在其中,那么用户密码就有可能暴露。...曝光记录总数达 2.23 亿条 扫描互联网、解析原始数据和整理工作耗时约一个月,整个过程开始到结束并不顺利。...为了自动检查 Firebase 读取权限,研究小组使用了 Eva 另一个脚本,该脚本会抓取网站或其 JavaScript,以便访问 Firebase 集合(Cloud Firestore NoSQL

    18710

    Flutter2 来了!!!

    我们目标是从根本改变开发人员对构建应用程序看法,而不是您要定位平台开始,而要从您要创建体验开始。Flutter使您可以在品牌和设计走在前列情况下,手工创造美好体验。...在今天发布Flutter 2,我们将Flutter移动框架扩展到了可移植框架,释放了您应用程序,使其可以在各种不同平台上运行,而几乎没有改变。...Flutter对网络生产支持使iRobot可以利用其现有的教育编程环境并将其移至网络,从而将其可用性扩展到Chromebook和其他浏览器是最佳选择设备。...首先,Canonical与我们合作将Flutter带入桌面,工程师们贡献了代码来支持Linux开发和部署。在今天活动,Ubuntu团队展示了由Flutter重写新安装程序早期演示。...可靠null安全性有可能消除可怕null引用异常,从而在开发和运行时提供了保证,即如果开发人员明确选择,则类型只能包含null

    3.2K20

    flutter架构:Repository设计模式

    在软件开发,我们可以使用设计模式有效解决我们软件设计常见问题。而在app架构,「structural」设计模式可以帮助我们很好划分应用结构。...在本文,我们将使用「Repository」设计模式,访问各种来源数据,如后端API,蓝牙等等。并将这些数据转化成类型安全实体类提供给上层(领域层),即我们业务逻辑所在位置。...将数据数据对象「转换为领域层(domain layer)中使用」实体或模型 (可选)执行「数据缓存」等操作。 ❝上图仅展示了构建APP其中一种架构模式。...如果说更具体的话,下面这些场景我认为「Repository设计模式」更合适: 与 REST API 交互 与本地或远程数据库(例如 Sembast、Hive、Firestore 等)交互 与设备 API...优点 「:」 完全可以使用不同实现 ****,替换时只需要更改初始化时一行代码。 缺点**:**当我们在IDE点击“跳转到引用”时只能到抽象类方法定义而不是具体类实现。

    2.6K30

    做完这套面试题,你才敢说懂Excel

    下面的题目来自一份商品专员面试题,其中有涉及到条件格式、自定义排序、数据验证制作下拉菜单、查找引用类函数、文本提取函数等等技能。...设置好出错警告后,当我在设置了数据验证区域里输入不是“电脑用品,工业用品,工艺收藏,户外运动,家居园艺”任意一个时,就会弹出提示,如下图: 问题4:为销售员匹配对应小组,并将小组-销售员-产品线组合到一个单元格...即高小明在成员列,是第4个。 用match匹配出位置信息后,我们再嵌套index引用函数,将match匹配出来位置信息作为index第二个参数传回给index。...设置好出错警告后,当我在设置了数据验证区域里输入不是“电脑用品,工业用品,工艺收藏,户外运动,家居园艺”任意一个时,就会弹出提示,如下图: 问题4:为销售员匹配对应小组,并将小组-销售员-产品线组合到一个单元格...即高小明在成员列,是第4个。 用match匹配出位置信息后,我们再嵌套index引用函数,将match匹配出来位置信息作为index第二个参数传回给index。

    4.7K00
    领券