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