how to build multiple marker with different colours by using flutter table_calendar?

Issue

i’m new to flutter, learning from table_calendar sample code, i’m trying to modify ‘Widget _buildTableCalendarWithBuilders’ so that it can print multiple markers with different colours, can someone show me the right way?

result i need is when ‘Apple’ is found in string, print a red dot. when ‘Orange’ is found in string, print a black dot, if both exist, the date box should have red and black dot.

below is my code

        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;
        }

my new widget

  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,
    );
  }

Solution

I found two ways to change the colors of the markers.

the first was answered by fabianogadenz here: github link

And the second way, I wanted to toggle the marker color when selecting a day with an event. So I stored the selectedDay in a varaible:

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

then I just compared it with the event map date using the calendarBuilder(singleMarkerBuilder):

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

Answered By – Will Cavenagli

Answer Checked By – Marilyn (FlutterFixes Volunteer)