Easy Ways to Build a Heat Map Calendar Using the Flutter Event Calendar
Tags: flutter, dart, mobile, webdev
Published: 2021-06-25 11:42:15

---
title: Easy Ways to Build a Heat Map Calendar Using the Flutter Event Calendar
published: true
date: 2021-06-25 10:30:23 UTC
tags: flutter, dart, mobile, webdev
canonical_url: https://www.syncfusion.com/blogs/post/heat-map-calendar-using-flutter-event-calendar.aspx
cover_image: https://www.syncfusion.com/blogs/wp-content/uploads/2021/06/Easy-Ways-to-Build-a-Heat-Map-Calendar-Using-the-Flutter-Event-Calendar-672x372.png
---

In this blog post, we are going to discuss how to design a heat map calendar and apply color for the different month cells based on a user’s mobile usage using the [Flutter event Calendar](https://help.syncfusion.com/flutter/calendar/builders#month-cell-builder "Link to Month cell builder in Flutter Calendar") widget.

A [heat map](https://en.wikipedia.org/wiki/Heat_map "Link to Heat map Wikipedia page") is a data visualization technique that uses colors the way a bar graph uses height and width. To create a heat map calendar, we require data for a month’s dates. In our example, we are going to display the digital well-being data of a smartphone.

These days, smartphones have become essential, and our daily usage of smartphones is increasingly high. We are using mobile phones for 8 to 9 hours a day. So, to track a user’s mobile phone usage, we can use digital well-being data. The Syncfusion [Flutter event Calendar](https://www.syncfusion.com/flutter-widgets/flutter-calendar "Link to Flutter event Calendar"), with its rich feature set, allows users to design a heatmap calendar using custom builder support.

![Heat Map Using Flutter Event Calendar](https://www.syncfusion.com/blogs/wp-content/uploads/2021/06/Heat-Map-Flutter-Event-Calendar.png)<figcaption>Heat Map Using Flutter Event Calendar</figcaption>

**Note:** If you are new to the Calendar widget, please go through the [Getting started with Flutter event Calendar](https://help.syncfusion.com/flutter/calendar/getting-started "Link to Getting started with Flutter Event Calendar documentation")documentation before proceeding.

## Handling data

First, get the required data (mobile usage in hours) and color to render. Then, render the background color to the corresponding UI. For demo purposes, we are providing some random data.

Refer to the following code example.

```dart
final List<int> _usageHours = <int>[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23];
  final List<HeatMapData> _heatMapDataCollection = <HeatMapData>[];
  final Random random = Random();

  @override
  void initState() {
    _addHeatMapData();
    super.initState();
  }

  void _addHeatMapData() {
    for (int i = 0; i < 100; i++) {
      final int hour = random.nextInt(_usageHours.length);
      final Color color = _getMonthCellBackgroundColor(hour);
      _heatMapDataCollection.add(HeatMapData(hour, color));
    }
  }

  Color _getMonthCellBackgroundColor(int hour) {
    if(hour < 6){
      return _kLightGrey;
    }else if(hour < 11){
      return _kLightGreen;
    }else if(hour < 16){
      return _kMidGreen;
    }else if(hour < 21){
      return _kDarkGreen;
    }

    return _kDarkerGreen;
  }
```

## Designing the heat map calendar

In the Flutter event calendar, you can customize the presentation of data and its interaction using the builder support. Customize the calendar month cell to apply the background color related to the corresponding data in each cell using the [monthCellBuilder](https://help.syncfusion.com/flutter/calendar/builders#month-cell-builder "Link to Month cell builder property in Flutter Calendar") property **.** Then, assign the data values to the corresponding UI.

Now, return the designed custom UI with the data in the monthCellBuilder callback.

Refer to the following code example.

```dart
/// Returns the calendar widget based on the properties passed.
  SfCalendar _getHeatMapCalendar(bool isMobilePlatform) {
    return SfCalendar(
        showNavigationArrow: !isMobilePlatform,
        view: CalendarView.month,
        monthCellBuilder: _monthCellBuilder,
        showDatePickerButton: true,
        maxDate: _maxDate,
        initialDisplayDate: DateTime.now().subtract(Duration(days: 100)),
        monthViewSettings: const MonthViewSettings(
          showTrailingAndLeadingDates: false,
        ));
  }

  /// Returns the cell text color based on the cell background color.
  Color _getCellTextColor(Color backgroundColor) {
    if (backgroundColor == _kDarkGreen || backgroundColor == _kDarkerGreen) {
      return Colors.white;
    }

    return Colors.black;
  }

  /// Returns the builder for month cell.
  Widget _monthCellBuilder(
      BuildContext buildContext, MonthCellDetails details) {
     Color backgroundColor = _heatMapDataCollection[random.nextInt(100)].color;
     if(details.date.isAfter(_maxDate)){
       backgroundColor = Colors.transparent;
     }else if(isSameDate(details.date, _maxDate)){
       backgroundColor = _getMonthCellBackgroundColor(random.nextInt(_maxDate.hour));
     }
    final Color defaultColor = Colors.white;
    return Container(
      decoration: BoxDecoration(
          color: backgroundColor,
          border: Border.all(color: defaultColor, width: 0.5)),
      child: Center(
        child: Text(
          details.date.day.toString(),
          style: TextStyle(color: _getCellTextColor(backgroundColor)),
        ),
      ),
    );
  }
```

Now, the Calendar widget is completely configured. Run the sample to see the event calendar with heat map data.

![Heat Map Calendar Using Flutter Event Calendar](https://www.syncfusion.com/blogs/wp-content/uploads/2021/06/Designing-a-Heat-Map-Calendar-using-Flutter-Event-Calendar.png)<figcaption>Heat Map Calendar Using Flutter Event Calendar</figcaption>

## Resource

For more information, refer to [designing a heat map using the Flutter event Calendar demo](https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/calendar/heatmap.dart "Link to designing a heat map using the Flutter event Calendar demo on GitHub").

## Conclusion

Thanks for reading! In this blog post, we’ve seen how to design a heatmap calendar using the [Flutter event Calendar](https://www.syncfusion.com/flutter-widgets/flutter-calendar "Link to Flutter Event Calendar"). This widget is available in [Android](https://en.wikipedia.org/wiki/Android_(operating_system) "Link to Android Wikipedia page"), [iOS](https://en.wikipedia.org/wiki/IOS "Link to iOS Wikipedia page"), [web](https://en.wikipedia.org/wiki/World_Wide_Web "Link to World Wide Web Wikipedia page"), [Windows](https://en.wikipedia.org/wiki/Microsoft_Windows "Link to Microsoft Windows Wikipedia page"), [Mac](https://en.wikipedia.org/wiki/MacOS%20Wikipedia%20page "Link to MacOS Wikipedia page"), and [Linux](https://en.wikipedia.org/wiki/Linux "Link to Linux Wikipedia page") platforms. With this heat map data visualization, you can easily understand the trends in data with different color patterns!

Also, you can check out our other Flutter project demos in this [GitHub](https://github.com/syncfusion/flutter-examples "Link to Syncfusion Flutter examples on GitHub") repository. Feel free to try out these demos and share your feedback or questions in the comments section.

Our Calendar component is also available in our [Blazor](https://www.syncfusion.com/blazor-components/blazor-calendar "Link to Blazor Calendar"), ASP.NET ([Core](https://www.syncfusion.com/aspnet-core-ui-controls/calendar "Link to ASP.NET Core Calendar"), [MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls/calendar "Link to ASP.NET MVC Calendar")), [JavaScript](https://www.syncfusion.com/javascript-ui-controls/js-calendar "Link to JavaScript Calendar"), [Angular](https://www.syncfusion.com/angular-ui-components/angular-calendar "Link to Angular Calendar"), [React](https://www.syncfusion.com/react-ui-components/react-calendar "Link to React Calendar"), [Vue](https://www.syncfusion.com/vue-ui-components/vue-calendar "Link to Vue Calendar"), [Xamarin](https://www.syncfusion.com/xamarin-ui-controls/xamarin-calendar "Link to Xamarin Calendar"), [UWP](https://www.syncfusion.com/uwp-ui-controls/calendar "Link to UWP Calendar"), [WinForms](https://www.syncfusion.com/winforms-ui-controls/calendar "Link to WinForms Calendar"), [WPF](https://www.syncfusion.com/wpf-ui-controls/calendar "Link to WPF Calendar"), and [WinUI](https://www.syncfusion.com/winui-controls/calendar "Link to WinUI Calendar") platforms. Use them to build astonishing applications!

For existing customers, the new version is available for download from the [License and Downloads](https://www.syncfusion.com/account/downloads "Link to license and download page of Essential Studio") page. If you are not yet a Syncfusion customer, you can try our 30-day [free trial](https://www.syncfusion.com/downloads "Link to the free evaluation of the Syncfusion Essential Studio") to check out our available features.

You can contact us through our [support forum](https://www.syncfusion.com/forums "Link to the Syncfusion support forum"), [Direct-Trac](https://www.syncfusion.com/support/directtrac/ "Link to the Syncfusion support system Direct Trac"), or [feedback portal](https://www.syncfusion.com/feedback/ "Link to Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [Top 10 Features of Flutter Event Calendar](https://dev.to/karthickramasamy08/top-10-features-of-flutter-event-calendar-4deb-temp-slug-1982050 "Link to Top 10 Features of Flutter Event Calendar blog")
- [Load More Data on Demand in Flutter Event Calendar](https://dev.to/karthickramasamy08/how-to-load-more-data-on-demand-in-flutter-event-calendar-4ap3-temp-slug-7019517 "Link to How to Load More Data on Demand in Flutter Event Calendar blog")
- [Create a Scheduling Application Using Flutter Event Calendar](https://dev.to/syncfusion/how-to-create-a-scheduling-application-using-flutter-event-calendar-42dg "Link to How to Create a Scheduling Application Using Flutter Event Calendar blog")
- [Load Appointments On-Demand Using Web Services in Flutter Event Calendar](https://dev.to/syncfusion/how-to-load-appointments-on-demand-using-web-services-in-flutter-event-calendar-424j "Link to How to Load Appointments On Demand Using Web Services in Flutter Event Calendar blog")