Heatmap Calendar

Introduction of Heatmap Calendar

The heatmap calendar package in Flutter allows developers to create a visually appealing heatmap-style calendar. This widget is particularly useful for displaying patterns of activity, such as contributions over time, workout logs, or any other time-based data. The intensity of the heatmap cells varies based on the data values, providing an intuitive way to visualize trends and frequencies.

Key Features:

• Interactive Heatmap: Visually represent data intensity over time using a heatmap.
• Customizable Colors: Adjust colors to represent different data intensities.
• Flexible Data Input: Easily map your time-based data to the heatmap calendar.
• Responsive Layout: Adapts to different screen sizes and orientations.
• Tooltips and Labels: Display additional information with tooltips or labels on hover or tap.

Installation
To use the heatmap_calendar package, add it to your pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  heatmap_calendar: ^0.1.0  # Use the latest version

Run flutter pub get to install the package.

Importing the Package

import 'package:heatmap_calendar/heatmap_calendar.dart';

Properties:
input: A Map<DateTime, int> representing the date and its corresponding value, which determines the intensity of the heatmap color.

input: {
  DateTime(2024, 8, 23): 5,
  DateTime(2024, 8, 24): 10,
  DateTime(2024, 8, 25): 2,
},

colorThresholds: A Map<int, Color> that defines the color intensity based on the value associated with each date.

colorThresholds: {
  1: Colors.green[100]!,
  5: Colors.green[300]!,
  10: Colors.green[500]!,
},

weekDaysLabels: A List<String> representing the labels for the days of the week.

weekDaysLabels: ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"],

monthsLabels: A List<String> representing the labels for the months.

monthsLabels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],

squareSize: A double that defines the size of each square in the heatmap.

squareSize: 16.0,

textOpacity: A double that controls the opacity of the text labels on the heatmap.

textOpacity: 0.8,

labelTextColor: A Color for the text labels of days and months.

labelTextColor: A Color for the text labels of days and months.

dayTextColor: A Color for the day numbers in the heatmap squares.

dayTextColor: Colors.blueGrey[800]!,

onTap: A callback function that is triggered when a date square is tapped, providing the selected date.

onTap: (date) {
  print("Selected date: $date");
},

Basic Usage:

import 'package:flutter/material.dart';
import 'package:heatmap_calendar/heatmap_calendar.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HeatmapCalendarExample(),
    );
  }
}

class HeatmapCalendarExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Heatmap Calendar Example'),
      ),
      body: HeatMapCalendar(
        input: {
          DateTime(2024, 8, 23): 5,
          DateTime(2024, 8, 24): 10,
          DateTime(2024, 8, 25): 2,
          // Add more data points here
        },
        colorThresholds: {
          1: Colors.green[100]!,
          5: Colors.green[300]!,
          10: Colors.green[500]!,
        },
        weekDaysLabels: ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"],
        monthsLabels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
        squareSize: 16.0,
        textOpacity: 0.8,
        labelTextColor: Colors.blueGrey,
        dayTextColor: Colors.blueGrey[800]!,
        onTap: (date) {
          print("Selected date: $date");
        },
      ),
    );
  }
}

The heatmap calendar package offers a powerful way to visualize time-based data in your Flutter applications, making it easy to spot trends, patterns, and frequencies at a glance.

Thank for visiting Hybrid App Development
Posted by Hussam HM