[Flutter/dart] How to display an icon on the calendar along with the date

Overview

When making an app, I think there are many occasions when you use a calendar. Even so, you may want to display the icon image along with the date on the calendar. For example, you can record the study time of the day, display a picture of the date partner, and so on.

There are many libraries that display calendars in flutter, but the one that can display dates and other elements is flutter_calendar_carousel. This time, I will introduce how to use flutter_calendar_carousel.

How to use

First, install the library. Add the following to pubsec.yaml.

dependencies:
  flutter_calendar_carousel: ^1.5.1

Also, import as follows at the beginning of the module to be used.

import 'package:flutter_calendar_carousel/flutter_calendar_carousel.dart';
import 'package:flutter_calendar_carousel/classes/event.dart';

overview

First, I will show you the whole picture. (StatefulWidget State build () method)

@override
Widget build(BuildContext context) {

  List<DateTime> _days=[DateTime(2020, 12, 20), DateTime(2020, 12, 21)]; //Date to display the icon

  return Scaffold(
    appBar: AppBar(

      title: Text(widget.title),
    ),
    body: Container(
        margin: const EdgeInsets.only(top:20, left:20),
        //from here
        child: CalendarCarousel<Event>(
          //List of Events of the date to display the icon
          markedDatesMap: _getMarkedDateMap(_days, context),
          markedDateShowIcon: true,
          markedDateIconMaxShown: 1,
          markedDateMoreShowTotal: null,
          markedDateIconBuilder: (event)=>event.icon,  //icon
        ),
    )
  );
}

Event is a class that collects dates and icons.

class Event implements EventInterface {
  final DateTime date;
  final String title;
  final Widget icon;
  final Widget dot;
//以下略

Pass the List of Event to the markedDateMap: property and display the icon registered in Event with markedDateIconBulder :.

Creating an Event List

_getMarkedDateMap () creates a List of Events from a List of dates to display the icon.

  EventList<Event> _getMarkedDateMap(List<DateTime> days, BuildContext context){
    EventList<Event> _markedDateMap=new EventList<Event>(events: {});
    for (DateTime _date in days){
      _markedDateMap.add(_date,
          new Event(
            date: _date,
            icon: _getIcon(_date), //create icon
          ));
    }
    return _markedDateMap;
  }

For each date, create a date and an icon associated with the date in the Event constructor.

Creating a date-linked icon

_GetIcon () is a method to create an icon that takes a date as an argument and displays it.

One thing to keep in mind here is that you need to explicitly display the date letters as well as the icons. (It seems that it will be overwritten when the icon is displayed)

Widget _getIcon(DateTime date){

  bool _isToday=isSameDay(date, DateTime.now());　//is today？
  CalendarCarousel _calendar_default=CalendarCarousel();　
  Color _today_col=_calendar_default.todayButtonColor;  
  //today's background

  return Container(
      decoration: new BoxDecoration(
        color: _isToday ? _today_col : 　　　　Theme.of(context).scaffoldBackgroundColor,
        borderRadius: BorderRadius.circular(1000),
      ), //In the case of today, the background of the red circle and 
         //nothing if else
      child: Column(
          children: [
            Text(
              date.day.toString(),
              style: TextStyle(
                  color: _isToday? Colors.white: getDayCol(date),
                  fontWeight: FontWeight.w400
              ),　//Date letters: White today, black on weekdays, 
                  //red on holidays
            ),
            SizedBox(height: 2,),
            Icon(
              Icons.brightness_1,
              color: Colors.blue,
              size: 16,
            ), //Icon to display with date
          ]
      )

  );
}

First of all, in today's case the background is a red circle. Also, the color of the date should be white if it is today, black on weekdays, and red on holidays. (It seems that these settings will disappear when you overwrite them with the icon)

The Icon () part is the main subject, the icon you want to display with the date. Please replace as appropriate.

The following method is used to determine if the given date is today.

static bool isSameDay(DateTime day1, DateTime day2) {
  return ((day1.difference(day2).inDays) == 0 && (day1.day == day2.day));
}

It also uses a method that determines if a given date is a weekday or a holiday and returns the corresponding text color. (Holidays are not supported, so please add if necessary)

Color getDayCol(DateTime _date){
  switch(_date.weekday){
    case DateTime.saturday:
    case DateTime.sunday:
      return Colors.red;
    default:
      return Colors.black;
  }
}

The following calendar will be displayed.

Lastly

Please note that you cannot display too large widgets. Also, it is quite troublesome to have to reset the settings for date characters.