如何将 Flutter TextField 与 Firestore 字段同步?

2024-04-14

I have taskFirestore 中的文档,其中有todo场,以及TextField在 Flutter 用户界面中。

请指教如何制作textfield与同步todo场,即

  1. 任何时间,在textfield随着用户的输入而改变,更新todo包含刚刚输入的值的字段。
  2. 任何时候,todo字段已更新(在 Firestore 控制台中手动或由其他用户),请更新textfield具有最新值。

Thanks!


首先,提供一个TextEditingController to the TextField(看一眼this https://flutter.io/cookbook/forms/text-field-changes/完整的例子)。

对于问题的第一部分,您需要提供listener to the TextEditingController. This listener应该触发这样的函数:

  Future<void> _updateTaskValue(String text) {
    Firestore().runTransaction((Transaction transaction) {
      Firestore.instance.document([PATH OF YOUR DOCUMENT]).updateData({"todo": text});
    });
  }

假如说text是控制器的text价值。注意runTransaction用于避免数据并发。

对于问题的第二部分,您必须听该文件。为此,请声明为initState a StreamSubscription :

subscription = Firestore.instance.document("").snapshots().listen(
    (DocumentSnapshot snapshot) => this._onDatabaseUpdate(snapshot));

此订阅会在每次内容更新时触发一个函数(无论当前用户是否更新了内容)TextField,其他用户更新它,或从后台手动更新)。

下面调用的函数只是更新控制器的text具有新内容的属性:

void _onDatabaseUpdate(DocumentSnapshot snapshot) {
  setState(() {
    _controller.text = snapshot.data["todo"];
  });
}

有关完整示例,请参阅这个要点 https://gist.github.com/jon-mly/5042580533fb58927acca88f75213677.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何将 Flutter TextField 与 Firestore 字段同步? 的相关文章

随机推荐

  • 旋转后文本不在同一位置

    申请后transform rotate 90deg 文本与正常位置略有偏移 打开这个Firefox http jsfiddle net 42y89 http jsfiddle net 42y89 正如您所看到的 文本在旋转后看起来移动了 1
  • Cassandra - 使用主键列的任意子集按主键搜索

    是否有可能在 Cassandra 中找到主键与所有主键字段的任意子集匹配的记录 Example 使用下面描述的表 可以找到主键具有特定的记录type and name没有指定id or size CREATE TABLE playlists
  • Grunt 将每个目录中的所有 .less 编译为 .css

    因此 我已将站点设置为使用模块 其中每个模块都有自己的 less 文件 需要将其编译为 css 文件夹结构 common modules module name style less 我需要将所有 style less 文件转换为同一目录中
  • 初始化后如何更改引导轮播的间隔

    根据 doco 使用以下命令将设置轮播循环速度 carousel carousel interval 2000 但是 如果您已经初始化了轮播 则以不同的时间间隔调用上述内容没有任何效果 我应该注意 通过 JS 初始化轮播并不会设置data
  • 计算数组中元素出现的次数

    char array a a a b b c c c a d 我想计算该数组中的每个相同元素 以便可以将其从最高频率到最低频率进行排序 我希望输出变成这样 4 for a 2 for b 3 for c 1 for d 我已经尝试过这个 p
  • 在 Outlook 中,是否可以对我手动选择的电子邮件运行宏?

    是否可以对我在收件箱中手动选择的电子邮件运行宏 例如 右键单击电子邮件并选择 发送到 gt gt 宏 gt gt 显示接受 Outlook MailItem 作为参数的子例程列表 我认为您必须在邮件功能区中添加一个按钮 该按钮可以调用例程
  • 抓住每组中具有最高值的行?

    我的数据看起来像这样 Table Group A Color Blue Count 400 Group A Color Green Count 3 Group A Color Yellow Count 6 Group A Color Red
  • Watch OS 2 - 如何在 Watch 上存储完全本机应用程序的数据?

    我需要在 WatchKit 扩展上存储大约 5 个变量 仅在手表端 该应用程序将完全是原生的 不会向 iPhone 传递任何信息 如果手表重新启动 我需要保留数据 该应用程序当前在重新启动时重置为默认变量状态 我不知道该用什么 我在网上找到
  • Angular Animate 幻灯片从右侧翻页并从右侧翻页 (nganimate)

    我正在使用 Angular js 开展一个学校项目 我们还必须在我们的网站中实现一些动画 由于我的网站是主从结构 我想滑动详细信息页面 这是一个单独路由的页面 从右侧滑入 这其实并不是一个问题 但是当我返回 母版 页面时 母版页将从右侧滑入
  • 如何在Java中添加环境变量? [复制]

    这个问题在这里已经有答案了 可能的重复 如何从 Java 设置环境变量 https stackoverflow com questions 318239 how do i set environment variables from jav
  • 无法读取未定义的 extract-text-webpack-plugin 的属性“查询”

    我正在尝试使用 webpack 2 实现 extract text webpack plugin 并且我正在从头开始构建我的 webpack config js 当我想添加插件时 我按照以下说明进行操作npm https www npmjs
  • 如何获取 Angular 2 中当前模块的元数据?

    我想获取当前的元数据NgModule为了得到列表declarations and providers为了填充动态模块 我创建了一个在模态中显示组件的模块 那怎么办呢 您可以使用以下方式访问声明reflect metadata https g
  • couchdb:设计文档中的地图给出了compilation_error

    我在 Debian 测试中使用 Couchdb 1 1 1 我在数据库中有这个设计文档 id design Page rev 9 1944cdebabf20ae569eab7b534b43e67 views all map function
  • 使用特征应用代理

    我想为一个属性编写一个特征 为它提供一个代理 这样我就可以操纵 sees 背后的值 甚至可以为 direct access在一个班级内 这就是我现在所拥有的 但正如您所看到的 实际的 get set 或 store fetch 方法从未被调
  • 带下拉箭头的 GWT 文本框

    我想在文本框中有一个下拉箭头 在我的例子中实际上是 SuggestBox GMail 执行此操作是为了实现高级搜索功能 打开高级搜索对话框 要使该箭头显示在 TextBox 的右侧并可单击 正确的 GWT 布局是什么 看看 GMail 我发
  • 生成验证码图像 PHP

    我想使用 PHP imagettftext 生成验证码图像 以下是我的代码 它给出了一个空图像 我想解决这个问题 我已经测试了代码 但无法找到为什么图像没有显示 尽管我的随机文本被传递给验证码图像生成函数
  • 我可以在不设置内容类型的情况下调用 WCF 服务吗?

    我正在尝试使用 webHttpBinding 将遗留的 REST 普通旧 xml Web 服务替换为 WCF 服务 它必须向后兼容现有客户端 目前不在请求中发送内容类型标头 当我将客户指向我的新 Web 服务时 我收到 HTTP 错误 41
  • 用于嵌入 YouTube 视频的 CSP

    我刚刚开始在 Chrome 上的嵌入式 YouTube 视频中看到这一点 86 0 4240 193 最近更新 这可能就是我看到这个的原因 这些只是 报告 因此视频仍然会显示 但可能会出现数百个错误不对吧 这就是我所看到的 Report O
  • 在数据帧 R 中解除数据帧的嵌套

    我想解除这个数据框的嵌套 df lt tibble bears c 1 2 3 eagles tibble talons c 2 3 4 beaks c x y z 所以它看起来像 tibble bears c 1 2 3 talons c
  • 如何将 Flutter TextField 与 Firestore 字段同步?

    I have taskFirestore 中的文档 其中有todo场 以及TextField在 Flutter 用户界面中 请指教如何制作textfield与同步todo场 即 任何时间 在textfield随着用户的输入而改变 更新tod