如何将图像放入 sfcalendar 日期字段？答案

【问题标题】：How do I put an image in the sfcalendar date field?如何将图像放入 sfcalendar 日期字段？
【发布时间】：2023-01-11 09:32:10
【问题描述】：

我正在使用 sfcalendar 和 flutter 制作一个应用程序。我想将图像放在日历日期字段中。

我想让它像这个图像。 This is image link 我想像这张照片一样在 1 月 11 日放一张图片。

这是 sfcalendar 代码。

body: SfCalendar(
  view: CalendarView.month,
  dataSource: MeetingDataSource(_getDataSource()),
  monthViewSettings: MonthViewSettings(
     appointmentDisplayMode: MonthAppointmentDisplayMode.appointment),
),

这是数据源代码。

class MeetingDataSource extends CalendarDataSource {
  MeetingDataSource(List<Meeting> source) {
    appointments = source;
  }

  @override
  DateTime getStartTime(int index) {
    return appointments![index].from;
  }

  @override
  DateTime getEndTime(int index) {
    return appointments![index].to;
  }

  @override
  String getSubject(int index) {
    return appointments![index].eventName;
  }

  @override
  Color getColor(int index) {
    return appointments![index].background;
  }

  @override
  bool isAllDay(int index) {
    return appointments![index].isAllDay;
  }
}

class Meeting {
  Meeting(this.eventName, this.from, this.to, this.background, this.isAllDay);

  String eventName;
  DateTime from;
  DateTime to;
  Color background;
  bool isAllDay;
}
List<Meeting> _getDataSource() {
  final List<Meeting> meetings = <Meeting>[];
  final DateTime today = DateTime.now();
  final DateTime startTime = DateTime.parse('2023-01-01 00:00:00.000');
  final DateTime endTime = startTime.add(const Duration(hours: 2));
  meetings.add(Meeting(
       'Happy new year!', startTime, endTime, const Color(0xFF0F8644), false));
  return meetings;
}

我一直在各种网站上寻找如何将图像放入 sfcalendar 日期字段中，但我找不到。作为参考，图像名称为“Penguin.png”。请帮我！

【问题讨论】：

标签： flutter dart sfcalendar

【解决方案1】：

自定义 monthCellBuilder 的视图

 return Scaffold(
      body: SafeArea(
        child: SfCalendar(
          view: CalendarView.month,
          monthCellBuilder: (context, details) {
            return Column(
              children: [
                Text(
                  details.date.day.toString(),
                ),
                details.date.day == DateTime.now().day
                    ? Icon(Icons.people)
                    : SizedBox()
              ],
            );
          },
          dataSource: MeetingDataSource(_getDataSource()),
          monthViewSettings: MonthViewSettings(
              appointmentDisplayMode: MonthAppointmentDisplayMode.appointment),
        ),
      ),
    );

【讨论】：