분류, 패키지 및 저장소 검색

flutter_heatmap_calendar 표지
패키지 상세v1.0.5

flutter_heatmap_calendar

GitHub 기여 차트를 참고한 Flutter 히트맵 캘린더로 전통 모드/캘린더 모드를 포함합니다.

AndroidiOSWebmacOSWindowsLinux
30일 다운로드
5.3천
좋아요
226
Pub 점수
150

패키지 설치

flutter pub add flutter_heatmap_calendar

패키지 개요

공개 정보를 바탕으로 생성한 선택 가이드입니다.

GitHub의 기여 차트를 영감으로 한 히트맵 캘린더를 구현하는 플러터 패키지로, 전통적 및 캘린더 뷰를 모두 제공합니다. 활동 수준을 색 강도로 표현하여 날짜별 데이터를 시각화하며, 습관, 생산성 또는 사용자 참여도를 시간에 따라 추적하는 데 이상적입니다. 안드로이드, iOS, 웹, macOS, Windows, 리눅스 등 다양한 플랫폼을 지원해 광범위한 호환성을 보장합니다. 커스터마이징 가능한 색상, 날짜 범위, 이벤트 마커는 다양한 용도에 유연하게 대응할 수 있도록 합니다.

사용 사례

  • 일상 습관 추적
  • 사용자 참여도 시각화
  • 생산성 추세 모니터링
  • 활동 기록 표시
  • 반복 이벤트 계획 수립

주요 기능

  • 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.

카테고리

소스 저장소

이 패키지를 사용하는 프로젝트