Flutter Table Calendar从Firestore加载事件并按日期筛选显示问题

问题说明 #

使用TableCalendar组件时，从Firestore加载的事件无法在日历上展示，仅能显示未按日期筛选的事件列表，需要实现点击选中日期后展示对应日期事件的功能。

现有数据与代码信息 #

• Firestore返回的事件数据格式（打印日志）：

  I/flutter (16094): {date: Timestamp(seconds=1678363200, nanoseconds=0), event: [test]}
  

• 原StreamBuilder代码：

StreamBuilder(
    stream: _firestore.collection('planning').snapshots(),
    builder: (context, snapshot) {
      if (!snapshot.hasData) {
        return Center(
          child: Text('Loading'),
        );
      }

      var docs = snapshot.data.docs;

      List<Detail> dataWidgets = [];

      var event;
      var selectedDate;

      for(var data in docs){
        selectedDate = data.data()['selectedDate'];
        final wpEventController = data.data()['wpEventController'];
        event = data.data()['event'];
        final detailWp = data.data()['detailWp'];
        final name = data.data()['name'];
        final selectedEvent = data.data()['selectedEvent'];

        final dataWidget = Detail(selectedDate: selectedDate,wpEventController: wpEventController,event: event,detailWP: detailWp,name: name,selectedEvent:selectedEvent);
        dataWidgets.add(dataWidget);

      }

      print(event);

• 原TableCalendar代码：

TableCalendar(
              onDaySelected: (date, events, holiday){
                setState((){
                  _selectedEvent = events;
                });
              },
              events: _events,
              calendarController: _calendarController,
              startingDayOfWeek: StartingDayOfWeek.monday,
              headerStyle: HeaderStyle(formatButtonShowsNext: false),
              calendarStyle: CalendarStyle(
                  selectedColor: Colors.red[900], todayColor: Colors.red),
            ),

• 已定义状态变量：Map<DateTime, List<dynamic>> _events;、List<dynamic> _selectedEvent = [];

核心问题 #

1. Firestore返回的日期为Timestamp类型，未转换为TableCalendar要求的DateTime类型
2. 未将Firestore数据整理成Map<DateTime, List<dynamic>>格式，导致_events变量未正确填充，日历无法识别事件
3. 原逻辑未关联事件数据与日历的事件绑定

修改方案 #

1. 完善StreamBuilder内的数据处理逻辑 #

在StreamBuilder中，将Firestore的Timestamp转换为DateTime，并构建符合要求的_events Map：

StreamBuilder(
  stream: _firestore.collection('planning').snapshots(),
  builder: (context, snapshot) {
    if (!snapshot.hasData) {
      return const Center(child: Text('Loading'));
    }

    final docs = snapshot.data!.docs;
    // 初始化或重置_events
    Map<DateTime, List<dynamic>> eventsMap = {};
    List<Detail> dataWidgets = [];

    for (var doc in docs) {
      final data = doc.data();
      // 将Firestore Timestamp转换为DateTime
      final timestamp = data['date'] as Timestamp;
      final eventDate = timestamp.toDate();
      // 处理日期的时分秒，确保日历按天匹配
      final normalizedDate = DateTime(eventDate.year, eventDate.month, eventDate.day);
      
      final eventList = data['event'] as List<dynamic>;
      // 将事件添加到对应的日期下
      if (eventsMap.containsKey(normalizedDate)) {
        eventsMap[normalizedDate]!.addAll(eventList);
      } else {
        eventsMap[normalizedDate] = eventList;
      }

      // 保留原有的Detail组件逻辑
      final selectedDate = data['selectedDate'];
      final wpEventController = data['wpEventController'];
      final detailWp = data['detailWp'];
      final name = data['name'];
      final selectedEvent = data['selectedEvent'];

      dataWidgets.add(Detail(
        selectedDate: selectedDate,
        wpEventController: wpEventController,
        event: eventList,
        detailWP: detailWp,
        name: name,
        selectedEvent: selectedEvent,
      ));
    }

    // 更新_events状态
    setState(() {
      _events = eventsMap;
    });

    // 后续返回日历和事件列表的UI
    return Column(
      children: [
        TableCalendar(
          onDaySelected: (date, events, holiday) {
            setState(() {
              // 选中日期时，获取该日期的事件
              _selectedEvent = events;
            });
          },
          events: _events,
          calendarController: _calendarController,
          startingDayOfWeek: StartingDayOfWeek.monday,
          headerStyle: const HeaderStyle(formatButtonShowsNext: false),
          calendarStyle: CalendarStyle(
            selectedColor: Colors.red[900],
            todayColor: Colors.red,
          ),
        ),
        // 展示选中日期的事件列表
        Expanded(
          child: ListView.builder(
            itemCount: _selectedEvent.length,
            itemBuilder: (context, index) {
              return ListTile(title: Text(_selectedEvent[index].toString()));
            },
          ),
        ),
        // 原有的未筛选事件列表
        Expanded(child: ListView(children: dataWidgets)),
      ],
    );
  },
);

2. 关键修改点说明 #

• 日期归一化：将转换后的DateTime去掉时分秒，只保留年月日，确保TableCalendar能正确匹配日期（因为TableCalendar默认按天分组事件）
• 构建eventsMap：将每个事件按日期分组，存入Map<DateTime, List<dynamic>>格式，直接赋值给_events
• 点击事件处理：onDaySelected回调中直接获取该日期的events，赋值给_selectedEvent即可展示对应事件
• 状态更新：在StreamBuilder内通过setState更新_events，确保日历能实时获取最新的Firestore数据

注意事项 #

• 确保Firestore中的date字段类型为Timestamp，避免类型转换错误
• 初始化状态变量时，建议给_events和_selectedEvent赋初始值，避免空指针：

  Map<DateTime, List<dynamic>> _events = {};
  List<dynamic> _selectedEvent = [];
  

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