搜尋套件、儲存庫與 APP 分類

flutter_heatmap_calendar 封面
套件詳情v1.0.5

flutter_heatmap_calendar

Flutter 熱力圖日曆,靈感來自 GitHub 貢獻圖表,包含傳統模式 / 日曆模式。

AndroidiOSWebmacOSWindowsLinux
近 30 天下載
5300
喜歡數
226
Pub 分數
150

安裝套件

flutter pub add flutter_heatmap_calendar

套件介紹

根據套件公開資料產生的選型評估,僅供參考。

一個 Flutter 套件,實現了受 GitHub 貢獻圖表啟發的熱力圖日曆,提供傳統與日曆檢視。它利用顏色強度來表示活動程度,以可視化日期上的資料,非常適合追蹤習慣、生產力或使用者參與度隨時間的變化。此套件支援 Android、iOS、Web、macOS、Windows 及 Linux 多個平台,確保廣泛的相容性。可自訂的顏色、日期範圍與事件標記提升了其在各種應用情境下的彈性。

適用情境

  • 追蹤每日習慣
  • 可視化使用者參與度
  • 監控生產率趨勢
  • 顯示活動歷史
  • 規劃重複事件

主要特色

  • GitHub 風格的熱力圖設計
  • 雙視圖模式(傳統模式與日曆模式)
  • 活動等級的顏色強度
  • 跨平台支援
  • 可自訂日期範圍
  • 事件標記整合

適合對象

  • 生產力應用
  • 健康與健身追蹤器
  • 開發者儀表板
  • 使用者行為分析
  • 習慣追蹤工具

使用建議

  • 需要基於日期的資料輸入
  • 僅限日期粒度
  • 可能需要對大型數據集進行性能優化
  • 不適用於互動式日期選擇
  • 取決於準確的時間戳格式

原始 README

以下為關聯原始碼儲存庫的 README 原文快照,最新內容請造訪原始碼儲存庫。

Flutter Heatmap Calendar

Flutter Heatmap Calendar inspired by github contribution chart.

Flutter Heatmap Calendar 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_calendar

or

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

dependencies:
  flutter_heatmap_calendar: ^1.0.5

And run flutter pub get to install.

Import it.
import 'package:flutter_heatmap_calendar/flutter_heatmap_calendar.dart';

Props

HeatMap
Props Types Default Description
startDate DateTime? 1 year before of the endDate Start date of HeatMap.
endDate DateTime? Today
( DateTime.now() )
Last day of HeatMap.
datasets Map<DateTime, int>? null Sets of data which to be displayed.
colorsets Map<int, Color> required Sets of color values for its thresholds key value.
At least one Color is required.
Be aware that only first color will be used if ColorMode is ColorMode.opacity.
defaultColor Color? #F8F9FA Color(0xFFF8F9FA) Default color of every block.
textColor Color? #8A8A8A Color(0xFF8A8A8A) Color value of every text.
colorMode ColorMode ColorMode.opacity ColorMode.opacity requires just one colorsets value and changes color dynamically based on hightest value of datasets.
ColorMode.color changes colors based on colorsets thresholds key value.
size double? 20 The size of every block.
fontSize double? null The size of every text.
onClick Function(DateTime)? null Callback function which will be called if user clicks the block.
margin EdgeInsets? EdgeInsets.all(2) The margin value of block.
borderRadius double? 5 Border radius value of block.
scrollable bool false Make HeatMap scrollable if scrollable is true.
showText bool? false Show day text in every block if showText is true.
showColorTip bool? true Show color tip if showColorTip is true.
colorTipHelper List<Widget?>? null Widgets which are shown at left and right side of colorTip.
First value is the left side widget and second value is the right side widget.
Give null value makes default 'less' and 'more' text.
colorTipCount int? 7 Length of colorTip block.
colorTipSize double? 10 The size of colorTip.
HeatMapCalendar
Props Types Default Description
initDate DateTime? Today
( DateTime.now() )
Initialized Year/Month value of HeatMapCalendar.
datasets Map<DateTime, int>? null Sets of data which to be displayed.
colorsets Map<int, Color> required Sets of color values for its thresholds key value.
At least one Color is required.
Be aware that only first color will be used if ColorMode is ColorMode.opacity.
defaultColor Color? #F8F9FA Color(0xFFF8F9FA) Default color of every block.
textColor Color? #8A8A8A Color(0xFF8A8A8A) Color value of every text.
colorMode ColorMode ColorMode.opacity ColorMode.opacity requires just one colorsets value and changes color dynamically based on hightest value of datasets.
ColorMode.color changes colors based on colorsets thresholds key value.
size double? 42 The size of every block.
fontSize double? null The size of every text.
monthFontSize double? 12 The size of month label.
weekFontSize double? 12 The size of week label.
weekTextColor Color? #758EA1 Color(0xFF758EA1) Default color of every block.
onClick Function(DateTime)? null Callback function which will be called if user clicks the block.
margin EdgeInsets EdgeInsets.all(2) The margin value of block.
borderRadius double? 5 Border radius value of block.
flexible bool? false Makes HeatMapCalendar's size dynamically fit on screen.
If flexible is true then, size props will be ignored.
showColorTip bool? true Show color tip if showColorTip is true.
colorTipHelper List<Widget?>? null Widgets which are shown at left and right side of colorTip.
First value is the left side widget and second value is the right side widget.
Give null value makes default 'less' and 'more' text.
colorTipCount int? 7 Length of colorTip block.
colorTipSize double? 10 The size of colorTip.

Example

HeatMap
import 'package:flutter_heatmap_calendar/flutter_heatmap_calendar.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_calendar/flutter_heatmap_calendar.dart';
...
HeatMapCalendar(
  defaultColor: Colors.white,
  flexible: 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.

所屬分類

原始碼儲存庫

使用此套件的專案