Flutter中如何用StreamBuilder实现Firestore数据的年龄范围筛选？

问题需求 #

输入起始年龄与结束年龄，点击Submit按钮后，让StreamBuilder仅展示处于该数值区间内的用户数据，现有页面代码如下：

class TestScreen extends StatefulWidget {
  const TestScreen({super.key});

  @override
  State<TestScreen> createState() => _TestScreenState();
}

class _TestScreenState extends State<TestScreen> {
  final _firstTextController = TextEditingController();
  final _secondTextController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: SafeArea(
        child: StreamBuilder(
          stream: FirebaseFirestore.instance
              .collection("users")
              // .orderBy("accountCreated")
              .where("activeStatus", isEqualTo: "active")
              // .where("uid", isNotEqualTo: FirebaseAuth.instance.currentUser!.uid)
              .snapshots(),
          builder: (context, AsyncSnapshot<QuerySnapshot> streamSnapshot) {
            if (streamSnapshot.connectionState == ConnectionState.waiting ||
                !streamSnapshot.hasData) {
              return const Center(
                child: CircularProgressIndicator(),
              );
            }
            return ListView.builder(
              itemCount: streamSnapshot.data!.docs.length + 1,
              itemBuilder: (context, index) {
                if (index == 0) {
                  return Column(
                    children: <Widget>[
                      Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: TextField(
                          controller: _firstTextController,
                          decoration: const InputDecoration(
                            hintText: "from",
                          ),
                        ),
                      ),
                      Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: TextField(
                          controller: _secondTextController,
                          decoration: const InputDecoration(
                            hintText: "to",
                          ),
                        ),
                      ),
                      Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: TextButton(
                          onPressed: () {
                            print("First value: ${_firstTextController.text}");
                            print(
                                "Second value: ${_secondTextController.text}");
                          },
                          child: const Text("Submit"),
                        ),
                      ),
                    ],
                  );
                } else {
                  return Text(
                      streamSnapshot.data!.docs[index - 1]["displayName"]);
                }
              },
            );
          },
        ),
      ),
    );
  }
}

解决方案 #

提供两种实现方式，根据数据量选择合适的方案：

方式一：客户端过滤（适合小数据量，实现简单）

先获取全部符合基础条件的用户数据，再在本地根据输入的年龄区间筛选：

1. 在状态类中添加存储筛选条件的变量：

class _TestScreenState extends State<TestScreen> {
  final _firstTextController = TextEditingController();
  final _secondTextController = TextEditingController();
  // 存储筛选的年龄区间
  int? _minAge;
  int? _maxAge;
  
  // 其余代码不变
}

2. 修改Submit按钮的点击逻辑，转换输入并更新状态：

TextButton(
  onPressed: () {
    // 转换输入为整数，自动处理无效输入（比如非数字内容）
    final min = int.tryParse(_firstTextController.text);
    final max = int.tryParse(_secondTextController.text);
    setState(() {
      _minAge = min;
      _maxAge = max;
    });
  },
  child: const Text("Submit"),
),

3. 在StreamBuilder的builder中过滤数据：

builder: (context, AsyncSnapshot<QuerySnapshot> streamSnapshot) {
  if (streamSnapshot.connectionState == ConnectionState.waiting ||
      !streamSnapshot.hasData) {
    return const Center(child: CircularProgressIndicator());
  }

  // 过滤符合年龄区间的数据（假设用户文档中age字段为整数类型）
  final filteredDocs = streamSnapshot.data!.docs.where((doc) {
    final userAge = doc["age"] as int;
    // 未输入筛选条件时显示全部数据
    if (_minAge == null && _maxAge == null) return true;
    if (_minAge != null && _maxAge == null) return userAge >= _minAge!;
    if (_maxAge != null && _minAge == null) return userAge <= _maxAge!;
    return userAge >= _minAge! && userAge <= _maxAge!;
  }).toList();

  return ListView.builder(
    itemCount: filteredDocs.length + 1,
    itemBuilder: (context, index) {
      if (index == 0) {
        // 保持原有的输入框和按钮代码不变
        return Column(/* ... */);
      } else {
        return Text(filteredDocs[index - 1]["displayName"]);
      }
    },
  );
},

方式二：服务端查询过滤（适合大数据量，更高效）

直接在Firestore查询阶段就过滤年龄区间，减少客户端的数据传输量：

1. 添加状态变量和修改Submit逻辑（和方式一完全一致）。

2. 动态构建Firestore查询流：

// 在build方法外定义动态查询方法
Stream<QuerySnapshot> getUsersStream() {
  var query = FirebaseFirestore.instance
      .collection("users")
      .where("activeStatus", isEqualTo: "active");

  // 根据筛选条件添加年龄过滤
  if (_minAge != null && _maxAge != null) {
    query = query
        .orderBy("age") // Firestore范围查询必须先对该字段排序
        .where("age", isGreaterThanOrEqualTo: _minAge!)
        .where("age", isLessThanOrEqualTo: _maxAge!);
  } else if (_minAge != null) {
    query = query
        .orderBy("age")
        .where("age", isGreaterThanOrEqualTo: _minAge!);
  } else if (_maxAge != null) {
    query = query
        .orderBy("age")
        .where("age", isLessThanOrEqualTo: _maxAge!);
  }

  return query.snapshots();
}

// 在StreamBuilder中使用这个动态构建的流
StreamBuilder(
  stream: getUsersStream(),
  builder: (context, AsyncSnapshot<QuerySnapshot> streamSnapshot) {
    // 后续逻辑和原代码一致，数据已经在服务端过滤完成
    if (streamSnapshot.connectionState == ConnectionState.waiting ||
        !streamSnapshot.hasData) {
      return const Center(child: CircularProgressIndicator());
    }
    return ListView.builder(
      itemCount: streamSnapshot.data!.docs.length + 1,
      itemBuilder: (context, index) {
        // 原有的输入框和列表项代码不变
      },
    );
  },
),

注意：使用服务端过滤时，Firestore会提示你创建对应的复合索引，直接点击控制台的提示链接即可完成索引创建。

内容的提问来源于stack exchange，提问作者Harshana