Flutter热力图日历插件heatmap_calendar的使用

简介

heatmap_calendar是一个基于 GitHub 贡献图表的热力图日历插件，可以用来可视化时间维度上的数据。它允许用户通过颜色深浅展示不同日期的重要性或值。

安装

1. 添加依赖

在你的 pubspec.yaml 文件中添加以下内容：

dependencies:
  heatmap_calendar: ^1.2.8
2. 安装依赖

可以通过命令行安装依赖：

$ flutter pub get

使用示例

以下是一个完整的示例代码，展示如何使用 heatmap_calendar 插件：

import 'package:flutter/material.dart';
import 'package:heatmap_calendar/heatmap_calendar.dart';
import 'package:heatmap_calendar/time_utils.dart'; // 提供日期处理工具类

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: SafeArea(
          child: HeatMapCalendar(
            // 输入数据，键为日期，值为该日期的重要性或值
            input: {
              TimeUtils.removeTime(DateTime.now().subtract(Duration(days: 3))): 5,
              TimeUtils.removeTime(DateTime.now().subtract(Duration(days: 2))): 35,
              TimeUtils.removeTime(DateTime.now().subtract(Duration(days: 1))): 14,
              TimeUtils.removeTime(DateTime.now()): 5,
            },
            // 颜色阈值定义颜色渐变规则
            colorThresholds: {
              1: Colors.green[100],   // 值小于等于1的颜色
              10: Colors.green[300],  // 值小于等于10的颜色
              30: Colors.green[500],  // 值大于10的颜色
            },
            // 设置一周的星期标签
            weekDaysLabels: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
            // 设置月份标签
            monthsLabels: [
              "",
              "Jan",
              "Feb",
              "Mar",
              "Apr",
              "May",
              "Jun",
              "Jul",
              "Aug",
              "Sep",
              "Oct",
              "Nov",
              "Dec",
            ],
            // 每个方块的大小
            squareSize: 20.0,
            // 文本透明度
            textOpacity: 0.3,
            // 星期和月份标签文字颜色
            labelTextColor: Colors.blueGrey,
            // 每个日期文字颜色
            dayTextColor: Colors.blue[500],
          ),
        ),
      ),
    );
  }
}

更多关于Flutter热力图日历插件heatmap_calendar的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter热力图日历插件heatmap_calendar的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


heatmap_calendar 是一个用于在 Flutter 应用中显示热力图日历的插件。它可以帮助你以可视化的方式展示数据，例如用户的活动频率、任务完成情况等。以下是如何使用 heatmap_calendar 插件的基本步骤。

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 heatmap_calendar 插件的依赖。

dependencies:
  flutter:
    sdk: flutter
  heatmap_calendar: ^1.0.0  # 请检查最新版本

然后运行 flutter pub get 来安装依赖。

2. 导入包

在你的 Dart 文件中导入 heatmap_calendar 包。

import 'package:heatmap_calendar/heatmap_calendar.dart';

3. 使用 HeatMapCalendar

HeatMapCalendar 是 heatmap_calendar 插件中的主要组件。你可以通过传递一些参数来定制它的外观和行为。

基本用法

以下是一个简单的示例，展示如何使用 HeatMapCalendar：

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: Scaffold(
        appBar: AppBar(
          title: Text('Heatmap Calendar Example'),
        ),
        body: Center(
          child: HeatMapCalendar(
            startDate: DateTime(2023, 1, 1),
            endDate: DateTime(2023, 12, 31),
            data: {
              DateTime(2023, 1, 1): 5,
              DateTime(2023, 1, 2): 10,
              DateTime(2023, 1, 3): 15,
              // 添加更多日期和数据
            },
            colorThresholds: {
              1: Colors.green[100]!,
              5: Colors.green[300]!,
              10: Colors.green[500]!,
              15: Colors.green[700]!,
            },
          ),
        ),
      ),
    );
  }
}

参数说明

  • startDate: 热力图日历的起始日期。
  • endDate: 热力图日历的结束日期。
  • data: 一个 Map<DateTime, int>，表示每个日期的数据值。
  • colorThresholds: 一个 Map<int, Color>，表示不同数据值对应的颜色。

自定义外观

你可以通过以下参数进一步自定义热力图日历的外观：

  • cellSize: 每个单元格的大小。
  • cellMargin: 单元格之间的间距。
  • textStyle: 文本样式。
  • showColorScale: 是否显示颜色比例尺。
  • colorScalePosition: 颜色比例尺的位置（top、bottom、left、right）。
HeatMapCalendar(
  startDate: DateTime(2023, 1, 1),
  endDate: DateTime(2023, 12, 31),
  data: {
    DateTime(2023, 1, 1): 5,
    DateTime(2023, 1, 2): 10,
    DateTime(2023, 1, 3): 15,
  },
  colorThresholds: {
    1: Colors.green[100]!,
    5: Colors.green[300]!,
    10: Colors.green[500]!,
    15: Colors.green[700]!,
  },
  cellSize: 20.0,
  cellMargin: 2.0,
  textStyle: TextStyle(fontSize: 12, color: Colors.black),
  showColorScale: true,
  colorScalePosition: ColorScalePosition.bottom,
)

4. 处理交互

你可以通过 onTap 回调来处理用户点击单元格的事件。

HeatMapCalendar(
  startDate: DateTime(2023, 1, 1),
  endDate: DateTime(2023, 12, 31),
  data: {
    DateTime(2023, 1, 1): 5,
    DateTime(2023, 1, 2): 10,
    DateTime(2023, 1, 3): 15,
  },
  colorThresholds: {
    1: Colors.green[100]!,
    5: Colors.green[300]!,
    10: Colors.green[500]!,
    15: Colors.green[700]!,
  },
  onTap: (DateTime date, int value) {
    print('Tapped on $date with value $value');
  },
)
回到顶部