如何将Flutter TextField与Firestore字段同步? [英] How to sync Flutter TextField with Firestore field?

问题描述

我在Firestore中有 task 文档，该文档具有 todo 字段，在Flutter UI中具有 TextField .

I have task document in Firestore, which has todo field, and TextField in the Flutter UI.

请建议如何使文本字段与 todo 字段(即

Please advice how to make the textfield synced with the todo field, i.e.

1. 任何时候，文本字段中的文本都会随着用户的键入而更改，并使用刚键入的值更新 todo 字段.
2. 任何时候， todo 字段都会更新(手动在Firestore控制台中或由其他用户手动)，并使用最新值更新 textfield .

1. Any time, text in the textfield is changed as user's typing, update the todo field with the just typed value.
2. Any time, the todo field is updated (manually in the Firestore console or by other user), update the textfield with the most recent value.

谢谢！

推荐答案

首先，向 TextField 提供一个 TextEditingController (看看此(完整示例).

First of all, supply a TextEditingController to the TextField (take a look at this for a complete example).

对于问题的第一部分，您需要为 TextEditingController 提供一个 listener .此 listener 应该触发类似这样的功能:

For the first part of the question, you will need to provide a listener to the TextEditingController. This listener should trigger a function like so :

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

假定 text 是控制器的 text 值.请注意， runTransaction 用于避免数据并发.

Assuming that text is the controller's text value. Note that runTransaction is used to avoid data concurrency.

对于问题的第二部分，您将不得不听文档.为此，在 initState 中声明一个 StreamSubscription :

For the second part of the question, you will have to listen to the document. To do so, declare into initState a StreamSubscription :

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

每次内容更新时(无论当前用户是更新 TextField ，还是其他用户更新它，还是从后台手动进行)，该订阅都会触发一个功能.

This subscription will trigger a function each time the content is updated (whether the current user updates the TextField, another users updates it, or manually from the back office).

下面调用的函数仅用新内容更新控制器的 text 属性:

The function called below simply updates the controller's text attribute with the new content :

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

有关完整示例，请参见此要点.

For a complete example, see this gist.

这篇关于如何将Flutter TextField与Firestore字段同步?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！