Flutter Firebase实现按日期范围筛选列表数据

方案一：客户端即时过滤（基于现有代码快速修改） #

在你代码的else分支里，利用Firebase的Timestamp字段转成DateTime，和选中的日期范围做比对，只返回符合条件的ListTile：

else {
  // 将Firebase Timestamp转为DateTime
  final transactionDateTime = (timestamp as Timestamp).toDate();
  // 处理日期范围的边界：确保包含结束日期的所有时刻
  final startDate = dateRange!.start;
  final endDate = dateRange!.end.add(const Duration(days: 1)).subtract(const Duration(microseconds: 1));

  // 判断当前交易时间是否在选中范围内
  if (transactionDateTime.isAfter(startDate) && transactionDateTime.isBefore(endDate) ||
      transactionDateTime.isAtSameMomentAs(startDate) ||
      transactionDateTime.isAtSameMomentAs(endDate)) {
    // 返回原有的ListTile
    return ListTile(
      title: Row(
        children: [
          Padding(
            padding: const EdgeInsets.only(left: 50),
            child: SizedBox(
              width: screenWidth * 0.1,
              child: Text(date),
            ),
          ),
          Padding(
            padding: const EdgeInsets.only(left: 100),
            child: SizedBox(
              width: screenWidth * 0.2,
              child: Text("$amount"),
            ),
          )
        ],
      ),
    );
  } else {
    // 不符合条件的条目返回空容器，不显示
    return const SizedBox.shrink();
  }
}

方案二：服务端过滤（更高效，减少客户端数据传输） #

直接在Firestore查询阶段就过滤数据，避免把所有数据拉到客户端再筛选，性能更好：

1. 先封装一个获取过滤后数据流的方法：

Stream<QuerySnapshot> getFilteredTransactions() {
  var query = FirebaseFirestore.instance
      .collectionGroup(widget.dailyTransactionsCollection)
      .orderBy("Timestamp", descending: true);

  if (dateRange != null) {
    // 转换选中的日期范围为Firebase Timestamp
    final startTimestamp = Timestamp.fromDate(dateRange!.start);
    // 结束日期设为次日0点，确保包含结束当天的所有交易
    final endTimestamp = Timestamp.fromDate(dateRange!.end.add(const Duration(days: 1)));
    
    // 添加范围过滤条件
    query = query
        .where("Timestamp", isGreaterThanOrEqualTo: startTimestamp)
        .where("Timestamp", isLessThan: endTimestamp);
  }

  return query.snapshots();
}

2. 修改StreamBuilder的stream参数：

StreamBuilder(
  stream: getFilteredTransactions(), // 替换原来的stream
  builder: (context, snapshot) {
    // 原有的builder逻辑保持不变，因为现在数据流已经是过滤后的了
    if (snapshot.connectionState == ConnectionState.waiting) {
      return const CircularProgressIndicator();
    } else if (snapshot.hasError) {
      return Text(
        widget.errorString,
        style: const TextStyle(color: Colors.white),
      );
    }
    if (snapshot.hasData) {
      return ListView.builder(
        itemCount: snapshot.data!.docs.length,
        itemBuilder: (context, index) {
          final data = snapshot.data!.docs[index];
          final date = data["Date"];
          final amount = data["Amount"];
          
          // 不需要再判断dateRange，直接返回ListTile即可
          return ListTile(
            title: Row(
              children: [
                Padding(
                  padding: const EdgeInsets.only(left: 50),
                  child: SizedBox(
                    width: screenWidth * 0.1,
                    child: Text(date),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.only(left: 100),
                  child: SizedBox(
                    width: screenWidth * 0.2,
                    child: Text("$amount"),
                  ),
                )
              ],
            ),
          );
        },
      );
    }
    return Center(
      child: Text(widget.noDataYetString),
    );
  },
)

注意事项 #

• 优先用方案二，因为服务端过滤能减少网络传输的数据量，提升加载速度和性能
• 确保Firestore已经为Timestamp字段创建了索引（如果查询时提示需要索引，Firebase控制台会给出创建链接）

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