firebase - 将 SearchField 添加到从 Firestore 读取的 StreamBuilder

Question

我有一个程序，可以从 Firebase 的云 Firestore 获取用户列表，并使用 Flutter 中的 StreamBuilder 将它们显示在 ListView 中。用户数量会很大，我想在我的流构建器中实现一个搜索字段，它将查询与我的搜索字段匹配的结果。我希望它看起来像这样:

--照片来源:https://blog.usejournal.com/flutter-search-in-listview-1ffa40956685

我的 Streambuilder 如下所示:

StreamBuilder<QuerySnapshot>(
        stream: Firestore.instance
            .collection('users')
            .snapshots(),
        builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
          if (snapshot.hasError) return new Text('Error: ${snapshot.error}');
          switch (snapshot.connectionState) {
            case ConnectionState.waiting:
              return Center(
                child: Column(
                  children: <Widget>[
                    CircularProgressIndicator(),
                    Text('Loading'),
                  ],
                ),
              );
            default:
              return Container(
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    ListView.separated(
                      shrinkWrap: true,
                      padding: EdgeInsets.all(10.0),
                      itemCount: snapshot.data.documents.length,
                      itemBuilder: (context, index) {
                        return buildUserRow(snapshot.data.documents[index]);
                      },
                      separatorBuilder: (context, index) {
                        return Divider();
                      },
                    ),
                  ],
                ),
              );
          }
        })

所以我想使用这个 StreamBuilder 作为我的数据源，并通过文档快照的 'name' 属性进行搜索。非常感谢任何帮助。

Answer 1

使用 Firestore 实际上变得很容易

在字符串字段上添加 if 条件。如果包含搜索字符串，则返回小部件。

这不是最终代码，您必须进行许多更改。但这就是可以做到的。

ListView.separated(
        shrinkWrap: true,
        padding: EdgeInsets.all(10.0),
        itemCount: snapshot.data.documents.length,
        itemBuilder: (context, index) {
          if (snapshot.data.documents[index].contains(youSearchString))
            return buildUserRow(snapshot.data.documents[index]);
        },
        separatorBuilder: (context, index) {
          return Divider();
        })