将SearchField添加到从Firestore读取的StreamBuilder中

Question

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

-照片来源：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实际上很容易

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

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

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();
        })