top of page

[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.

Recent Posts

See All

[Flutter/Dart] Format string with TextField

What want to do I want to create an input form using TextField. For example, if the input content is a monetary amount, I would like to display it in 3-digit delimiters with a ¥ prefix. Rather than ha

Comments


Let's do our best with our partner:​ ChatReminder

iphone6.5p2.png

It is an application that achieves goals in a chat format with partners.

google-play-badge.png
Download_on_the_App_Store_Badge_JP_RGB_blk_100317.png

Let's do our best with our partner:​ ChatReminder

納品:iPhone6.5①.png

It is an application that achieves goals in a chat format with partners.

google-play-badge.png
Download_on_the_App_Store_Badge_JP_RGB_blk_100317.png

Theme diary: Decide the theme and record for each genre

It is a diary application that allows you to post and record with themes and sub-themes for each genre.

google-play-badge.png
Download_on_the_App_Store_Badge_JP_RGB_blk_100317.png
bottom of page