Flutter Web中如何将TableCalendar日期区域光标改为指针？

要修改TableCalendar日期单元格的光标为指针样式，不需要依赖组件内部的GestureDetector，有两种简单可行的方案：

方案一：全局包裹MouseRegion #

直接用MouseRegion把整个TableCalendar组件包裹起来，鼠标移至日历区域时自动切换为指针光标，实现成本最低：

MouseRegion(
  cursor: SystemMouseCursors.click,
  child: TableCalendar(
    eventLoader: (day) {
      return controller.getEventsListResponse2.value.data!.rows!.where((event) => isSameDay(DateTime.parse(event.eventStartDateTime.toString()), day)).toList();
    },
    onDaySelected: (date, events,) {
      setState(() {
        _selectedDay = date;
        _focusedDay = date; // 注：原代码中_focusedDay赋值为events（事件列表）存在类型错误，建议改为date
      });
      controller.eventDetails.value =
          controller.getEventsListResponse2.value.data!.rows!
              .where((event) =>
                  isSameDay(DateTime.parse(event.eventStartDateTime.toString()), date)).toList();
    },
    selectedDayPredicate: (day) => isSameDay(_selectedDay, day),
    headerStyle: HeaderStyle(
      headerPadding: EdgeInsets.only(bottom: 20, left: 16),
      leftChevronVisible: false,
      rightChevronVisible: false,
      titleCentered: false,
      formatButtonVisible: false,
    ),
    calendarStyle: CalendarStyle(
      selectedDecoration: BoxDecoration(
        border: Border.all(
          color: AppColors.primaryColor,
          width: 2
        ),
        shape: BoxShape.rectangle,
      ),
    ),
    firstDay: DateTime(2020, 1),
    lastDay: DateTime(2030, 12),
    focusedDay: _focusedDay,
  ),
)

方案二：自定义单元格Builder（精准控制） #

如果只想让日期单元格（而非整个日历头部）显示指针光标，可以通过calendarBuilders自定义各类状态的单元格，在单元格外层包裹MouseRegion：

TableCalendar(
  eventLoader: (day) {
    return controller.getEventsListResponse2.value.data!.rows!.where((event) => isSameDay(DateTime.parse(event.eventStartDateTime.toString()), day)).toList();
  },
  onDaySelected: (date, events,) {
    setState(() {
      _selectedDay = date;
      _focusedDay = date; // 修正类型错误
    });
    controller.eventDetails.value =
        controller.getEventsListResponse2.value.data!.rows!
            .where((event) =>
                isSameDay(DateTime.parse(event.eventStartDateTime.toString()), date)).toList();
  },
  selectedDayPredicate: (day) => isSameDay(_selectedDay, day),
  headerStyle: HeaderStyle(
    headerPadding: EdgeInsets.only(bottom: 20, left: 16),
    leftChevronVisible: false,
    rightChevronVisible: false,
    titleCentered: false,
    formatButtonVisible: false,
  ),
  calendarStyle: CalendarStyle(
    selectedDecoration: BoxDecoration(
      border: Border.all(
        color: AppColors.primaryColor,
        width: 2
      ),
      shape: BoxShape.rectangle,
    ),
  ),
  firstDay: DateTime(2020, 1),
  lastDay: DateTime(2030, 12),
  focusedDay: _focusedDay,
  // 自定义单元格Builder
  calendarBuilders: CalendarBuilders(
    defaultBuilder: (context, day, focusedDay) {
      return MouseRegion(
        cursor: SystemMouseCursors.click,
        child: Container(
          alignment: Alignment.center,
          child: Text('${day.day}'),
        ),
      );
    },
    selectedBuilder: (context, day, focusedDay) {
      return MouseRegion(
        cursor: SystemMouseCursors.click,
        child: Container(
          alignment: Alignment.center,
          decoration: BoxDecoration(
            border: Border.all(
              color: AppColors.primaryColor,
              width: 2,
            ),
            shape: BoxShape.rectangle,
          ),
          child: Text(
            '${day.day}',
            style: TextStyle(color: AppColors.primaryColor),
          ),
        ),
      );
    },
    // 可按需扩展todayBuilder、otherBuilder等
  ),
)

两种方案都能实现光标切换效果，方案一适合快速实现全局生效，方案二更灵活，可针对不同状态的单元格单独配置。

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