flutter - 如何使用flutter table_calendar构建具有不同颜色的多个标记？

Question

我是 flutter 新手，向 table_calendar 学习示例代码，我正在尝试修改“Widget _buildTableCalendarWithBuilders”，以便它可以打印具有不同颜色的多个标记，有人可以告诉我正确的方法吗？

我需要的结果是当在字符串中找到“Apple”时，打印一个红点。当在字符串中找到 'Orange' 时，打印一个黑点，如果两者都存在，则日期框应该有红点和黑点。

下面是我的代码

        markersBuilder: (context, date, events, holidays) {
          final children = <Widget>[];

          String checkString = events.toString();
          if (checkString.contains('Apple')) {
            children.add(
              Positioned(
                right: 1,
                bottom: 1,
                child: _buildEventsMarker2(date, events, Colors.red),
              ),
            );
          }

          if (checkString.contains('Orange')) {
            children.add(
              Positioned(
                right: 1,
                bottom: 1,
                child: _buildEventsMarker2(date, events, Colors.black),
              ),
            );
          }

          if (holidays.isNotEmpty) {
            children.add(
              Positioned(
                right: -2,
                top: -2,
                child: _buildHolidaysMarker(),
              ),
            );
          }

          return children;
        }

我的新小部件

  Widget _buildEventsMarker2(DateTime date, List events, markerColors) {
    return AnimatedContainer(
      duration: const Duration(milliseconds: 300),
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        color: markerColors,
      ),
      width: 10.0,
      height: 10.0,
    );
  }

Answer 1

我找到了两种改变标记颜色的方法。
第一个由 fabianogadenz 在这里回答:github link
第二种方式，我想在选择有事件的一天时切换标记颜色。所以我将 selectedDay 存储在一个变量中:

DateTime? selectedDay;
    
TableCalendar(
  onDaySelected: (a, b) {
    setState(() {
      selectedDay = a;
    });
  },
)

然后我只是使用 calendarBuilder(singleMarkerBuilder) 将它与事件 map 日期进行了比较:

final map = <DateTime, List<String>>{
  DateTime.utc(2021, 9, 2): [
    'Event A',
    'Event B',
  ],
  DateTime.utc(2021, 9, 3): [
    "Event C",
  ],
};

TableCalendar(
  calendarBuilders: CalendarBuilders(
    singleMarkerBuilder: (context, date, _) {
      return Container(
        decoration: BoxDecoration(
          shape: BoxShape.circle,
          color: date == selectedDay ? Colors.white : Colors.black), //Change color
          width: 5.0,
          height: 5.0,
          margin: const EdgeInsets.symmetric(horizontal: 1.5),
      );
    },
  ),
)

Result here