Flutter技术疑问：table_calendar包为何无法导入Event类？

原因 #

table_calendar 包本身没有内置名为Event的类，你代码里用到的Event是需要开发者根据业务需求自行定义的自定义模型类，并非包提供的内置类型，所以直接导入包后使用Event会提示找不到类。

解决步骤 #

1. 自定义Event类：根据你需要的字段（比如date、title、icon、dot）创建这个类。
2. 修改Task的toEvent方法：返回自定义的Event实例。
3. 在TableCalendar中使用：将Task转换为Event后，整理成Map<DateTime, List<Event>>格式传入组件的events参数。

修改后的完整代码示例 #

import 'package:flutter/material.dart';
import 'package:table_calendar/table_calendar.dart';

// 1. 自定义Event类
class Event {
  final DateTime date;
  final String title;
  final Widget? icon;
  final Widget? dot;

  Event({
    required this.date,
    required this.title,
    this.icon,
    this.dot,
  });
}

class Task {
  late bool isComplete;
  String name;
  DateTime dueDate;
  int priority;

  Task({
    required this.isComplete,
    required this.name,
    required this.dueDate,
    required this.priority,
  });

  // 2. 修改toEvent方法，返回自定义Event实例
  Event toEvent() {
    return Event(
      date: dueDate,
      title: name,
      icon: null,
      dot: Container(
        decoration: BoxDecoration(
          shape: BoxShape.circle,
          color: Colors.blue,
        ),
        height: 5.0,
        width: 5.0,
      ),
    );
  }
}

// 示例：在页面中使用TableCalendar
class CalendarPage extends StatefulWidget {
  const CalendarPage({super.key});

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

class _CalendarPageState extends State<CalendarPage> {
  Map<DateTime, List<Event>> _events = {};

  @override
  void initState() {
    super.initState();
    // 模拟将Task转换为Event并整理成events格式
    final sampleTask = Task(
      isComplete: false,
      name: "完成项目文档",
      dueDate: DateTime.now(),
      priority: 1,
    );
    final event = sampleTask.toEvent();
    _events = {
      event.date: [event],
    };
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: TableCalendar(
        firstDay: DateTime.utc(2020, 1, 1),
        lastDay: DateTime.utc(2030, 12, 31),
        focusedDay: DateTime.now(),
        events: _events,
        // 自定义事件显示样式
        eventLoader: (day) {
          return _events[day] ?? [];
        },
        calendarBuilders: CalendarBuilders(
          markerBuilder: (context, date, events) {
            if (events.isNotEmpty) {
              return events.first.dot;
            }
            return null;
          },
        ),
      ),
    );
  }
}

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