Flutter heatmap calendar inspired by github contribution chart. [traditional mode / calendar mode]

Overview

Flutter Heatmap

Flutter heatmap calendar inspired by github contribution chart.

Flutter Heatmap provides traditional contribution chart called HeatMap and calendar version of it called HeatMapCalendar.

HeatMap HeatMapCalendar

Getting started

Depend on it.

flutter pub add flutter_heatmap

or

Add below line to your personal package's pubspec.yaml.

dependencies:
  flutter_heatmap: ^1.0.0

And run flutter pub get to install.

Import it.

import 'package:flutter_heatmap/flutter_heatmap.dart';

Props

HeatMap

Props Types Description
startDate DateTime?
endDate DateTime?
datasets Map<DateTime, int>?
defaultColor Color?
textColor Color?
size double?
fontSize double?
colorsets Map<int, Color>
colorMode ColorMode
onClick Function(DateTime)?
margin EdgeInsets?
borderRadius double?
showText bool?
showColorTip bool?
scrollable bool
colorTipHelper List<Widget?>?
colorTipCount int?
colorTipSize double?

HeatMapCalendar

Props Types Description
datasets Map<DateTime, int>?
defaultColor Color?
colorsets Map<int, Color>
borderRadius double?
initDate DateTime?
textColor Color?
size double?
fontSize double?
isFlexable bool?
margin EdgeInsets
colorMode ColorMode
onClick Function(DateTime)?
showColorTip bool?
colorTipHelper List<Widget?>?
colorTipCount int?
colorTipSize double?

Example

HeatMap

import 'package:flutter_heatmap/flutter_heatmap.dart';
...
HeatMap(
  datasets: {
    DateTime(2021, 1, 6): 3,
    DateTime(2021, 1, 7): 7,
    DateTime(2021, 1, 8): 10,
    DateTime(2021, 1, 9): 13,
    DateTime(2021, 1, 13): 6,
  },
  colorMode: ColorMode.opacity,
  showText: false,
  scrollable: true,
  colorsets: {
    1: Colors.red,
    3: Colors.orange,
    5: Colors.yellow,
    7: Colors.green,
    9: Colors.blue,
    11: Colors.indigo,
    13: Colors.purple,
  },
  onClick: (value) {
    ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text(value.toString())));
  },
);

HeatMapCalendar

import 'package:flutter_heatmap/flutter_heatmap.dart';
...
HeatMapCalendar(
  defaultColor: Colors.white,
  isFlexable: true,
  colorMode: ColorMode.color,
  datasets: {
    DateTime(2021, 1, 6): 3,
    DateTime(2021, 1, 7): 7,
    DateTime(2021, 1, 8): 10,
    DateTime(2021, 1, 9): 13,
    DateTime(2021, 1, 13): 6,
  },
  colorsets: const {
    1: Colors.red,
    3: Colors.orange,
    5: Colors.yellow,
    7: Colors.green,
    9: Colors.blue,
    11: Colors.indigo,
    13: Colors.purple,
  },
  onClick: (value) {
    ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text(value.toString())));
  },
);

License

MIT License

Copyright (c) 2021 Kim Seung Hwan

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
You might also like...

A simple radial chart for Flutter

A simple radial chart for Flutter

Jun 2, 2022

A simple candlestick chart for flutter. Supports smooth scroll and zoom

simple_candlestick_chart A simple candlestick chart for flutter. Supports smooth

Oct 17, 2022

A powerful 🚀 Android chart view / graph view library, supporting line- bar- pie- radar- bubble- and candlestick charts as well as scaling, panning and animations.

A powerful 🚀 Android chart view / graph view library, supporting line- bar- pie- radar- bubble- and candlestick charts as well as scaling, panning and animations.

⚡ A powerful & easy to use chart library for Android ⚡ Charts is the iOS version of this library Table of Contents Quick Start Gradle Maven Documentat

Dec 28, 2022

Stores and manages the data of your week expenses with a chart

personal_expenses_app A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you st

Dec 26, 2021

Track your habits day by day and check your result like the GitHub's contributions board

Track your habits day by day and check your result like the GitHub's contributions board

Habits Diary Track your habits day by day and see your result like the GitHub's contributions board Download Support If you want to support this proje

Oct 27, 2022

Charts Library for Flutter, written in Dart with Flutter.

Charts Library for Flutter, written in Dart with Flutter.

Table of Contents New in the current release Illustration of the new "iterative auto layout" feature Autolayout step 1 Autolayout step 2 Autolayout st

Dec 25, 2022

Animated radial and pie charts for Flutter

Animated radial and pie charts for Flutter

Flutter Circular Chart A library for creating animated circular chart widgets with Flutter, inspired by Zero to One with Flutter. Overview Create easi

Dec 26, 2022

Beautiful sparkline charts for Flutter

Beautiful sparkline charts for Flutter

flutter_sparkline Beautiful sparkline charts for Flutter. Installation Install the latest version from pub. Quick Start Import the package, create a S

Dec 21, 2022

Elegant OHLC Candlestick and Trade Volume charts for @Flutter

Elegant OHLC Candlestick and Trade Volume charts for @Flutter

flutter_candlesticks Elegant OHLC Candlestick and Trade Volume charts for Flutter Usage Install for Flutter with pub. Property Description data Requir

Dec 21, 2022
Owner
Kim Seung Hwan
Kim Seung Hwan
A powerful Flutter chart library, currently supporting Line Chart, Bar Chart, Pie Chart, Scatter Chart and Radar Chart.

FL Chart ?? A library to draw fantastic charts in Flutter ?? Chart Types LineChart BarChart PieChart Read More Read More Read More ScatterChart RadarC

Iman khoshabi 5.2k Dec 27, 2022
Sliver bar chart - A package that supports Bar Chart in a Flutter Sliver

Sliver bar chart - A package that supports Bar Chart in a Flutter Sliver. This Package allows us to add Bar Chart in Sliver and sets a Bar Chart as a Header on Slivers Scroll.

MindInventory 19 Oct 11, 2022
A beautiful bezier line chart widget for flutter that is highly interactive and configurable.

Bezier Chart A beautiful bezier line chart widget for flutter that is highly interactive and configurable. Features Multi bezier lines Allow numbers a

Aeyrium 428 Dec 21, 2022
A scrollable time chart in Flutter.

time_chart An amazing time chart in Flutter. Chart Types TimeChart AmountChart Getting Started 1 - Depend on it Add it to your package's pubspec.yaml

Minseong Kim 26 Oct 28, 2022
This project is used to introduce the use of flutter canvas, include draw chart, clip image's path and draw progress indicator.

flutter_canvas This project is used to introduce the use of flutter canvas, include draw chart, clip image's path and draw progress indicator. draw ch

YouXianMing 9 Oct 27, 2022
Maybe this is the best k chart in Flutter.Support drag,scale,long press,fling.And easy to use.

k_chart Maybe this is the best k chart in Flutter.Support drag,scale,long press,fling.And easy to use. display image gif Getting Started Install depen

OpenFlutter 342 Jan 9, 2023
Flutter chart library contains depth charts supporting various indicators and zooming

flutter_k_chart 介绍 一个仿火币的flutter图表库包含深度图,支持各种指标及放大缩小、平移等操作 webdemo演示 Demo v0.1.0:下载 APK 演示 简单用例 1.在 pubspec.yaml 中添加依赖 本项目数据来自火币openApi,火币的接口可能需要翻墙,接口

gwh 259 Dec 30, 2022
Animated line chart for flutter

fl_animated_linechart An animated chart library for flutter. Support for datetime axis Multiple y axis, supporting different units Highlight selection

null 51 Sep 25, 2022
Flutter Pie chart with animation

Pie Chart This Flutter package provides a Pie Chart Widget with cool animation. Live Demo: https://apgapg.github.io/pie_chart/ ?? Try LIVE Demo Live D

Ayush P Gupta 161 Dec 24, 2022
Basic radar chart for Flutter

flutter_radar_chart Animated radar chart for Flutter inspired by The Python Graph Gallery (https://python-graph-gallery.com/radar-chart/). Follow the

Dan Panaite 44 Dec 10, 2022