Flutter中无需重启App刷新TableCalendar与Firebase事件数据

1. 移除Future.delayed依赖，用FutureBuilder处理异步加载 #

原来通过延迟等待数据加载的方式不可靠，改用FutureBuilder可以自动监听异步请求状态，根据状态渲染对应UI，彻底摆脱手动延迟的依赖。

代码实现： #

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

  @override
  State<CalendarPage> createState() => _CalendarPageState();
}

class _CalendarPageState extends State<CalendarPage> {
  late Future<Map<DateTime, List<dynamic>>> _eventsFuture;
  Map<DateTime, List<dynamic>> _events = {};

  @override
  void initState() {
    super.initState();
    _eventsFuture = _fetchEventsFromFirebase(); // 直接初始化异步请求
  }

  // 从Firebase拉取事件数据的异步方法
  Future<Map<DateTime, List<dynamic>>> _fetchEventsFromFirebase() async {
    final snapshot = await FirebaseFirestore.instance.collection('events').get();
    final Map<DateTime, List<dynamic>> events = {};

    for (final doc in snapshot.docs) {
      final eventDate = DateTime.parse(doc['date']);
      if (!events.containsKey(eventDate)) {
        events[eventDate] = [];
      }
      events[eventDate]!.add(doc.data());
    }
    return events;
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<Map<DateTime, List<dynamic>>>(
      future: _eventsFuture,
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return const Center(child: CircularProgressIndicator()); // 加载状态
        } else if (snapshot.hasError) {
          return Center(child: Text('加载失败：${snapshot.error}')); // 错误状态
        } else {
          _events = snapshot.data ?? {};
          return TableCalendar(
            firstDay: DateTime(2023),
            lastDay: DateTime(2025),
            focusedDay: DateTime.now(),
            events: _events,
            // 其他日历配置项...
          );
        }
      },
    );
  }
}

2. 保存事件后自动刷新日历 #

在保存事件的按钮回调中，完成Firebase写入操作后，通过setState更新_eventsFuture，触发FutureBuilder重新执行数据拉取和UI刷新。

代码实现： #

ElevatedButton(
  onPressed: () async {
    // 1. 保存事件到Firebase
    await FirebaseFirestore.instance.collection('events').add({
      'title': '新事件标题',
      'date': DateTime.now().toIso8601String(),
      // 其他事件字段...
    });

    // 2. 重新拉取数据并刷新日历
    setState(() {
      _eventsFuture = _fetchEventsFromFirebase();
    });
  },
  child: const Text('保存事件'),
)

额外优化：实时监听Firebase数据变化（可选） #

如果希望日历自动响应Firebase中事件的新增/修改/删除，无需手动触发刷新，可以改用StreamBuilder监听Firestore的实时快照：

代码实现： #

@override
Widget build(BuildContext context) {
  return StreamBuilder<QuerySnapshot>(
    stream: FirebaseFirestore.instance.collection('events').snapshots(),
    builder: (context, snapshot) {
      if (snapshot.connectionState == ConnectionState.waiting) {
        return const Center(child: CircularProgressIndicator());
      } else if (snapshot.hasError) {
        return Center(child: Text('加载失败：${snapshot.error}'));
      } else {
        Map<DateTime, List<dynamic>> events = {};
        for (final doc in snapshot.data!.docs) {
          final eventDate = DateTime.parse(doc['date']);
          if (!events.containsKey(eventDate)) {
            events[eventDate] = [];
          }
          events[eventDate]!.add(doc.data());
        }
        return TableCalendar(
          firstDay: DateTime(2023),
          lastDay: DateTime(2025),
          focusedDay: DateTime.now(),
          events: events,
          // 其他日历配置项...
        );
      }
    },
  );
}

这种方式下，Firebase数据发生变更时，StreamBuilder会自动接收更新并刷新日历，无需手动调用刷新逻辑。

内容的提问来源于stack exchange，提问作者Albert mora costillo