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

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

简介

flutter_calendar_heatmap 是一个灵感来源于 GitHub 贡献图表的日历热力图插件。通过此插件，你可以在 Flutter 应用中展示美观的日历热力图。

使用步骤

1. 添加依赖

在你的项目 pubspec.yaml 文件中添加 flutter_calendar_heatmap 依赖：

dependencies:
  flutter_calendar_heatmap: ^0.1.0

2. 安装依赖

在命令行中运行以下命令来安装包：

flutter packages get

3. 使用插件

下面是一个完整的示例代码，展示了如何在 Flutter 应用中使用 flutter_calendar_heatmap 插件。

import 'dart:math';
import 'package:flutter/material.dart';
import 'package:flutter_calendar_heatmap/flutter_calendar_heatmap.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  // 存储日期和相应数据的映射
  Map<DateTime, int> _data = {};

  [@override](/user/override)
  void initState() {
    // 初始化示例数据
    _initExampleData();
    super.initState();
  }

  // 初始化示例数据
  void _initExampleData() {
    var rng = Random(); // 随机数生成器
    var now = DateTime.now(); // 当前时间
    var today = DateTime(now.year, now.month, now.day); // 今天的日期
    for (int i = 0; i < 200; i++) {
      // 从今天开始减去天数
      DateTime date = today.subtract(Duration(days: i));
      // 随机生成一个 0 到 5 之间的整数
      _data[date] = rng.nextInt(6);
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('热力图插件示例应用'),
        ),
        body: SingleChildScrollView(
          child: Padding(
            padding: const EdgeInsets.all(20),
            child: Column(
              children: [
                const SizedBox(height: 16),
                const Text("热力图", textScaleFactor: 1.4),
                const Text(
                  "Flutter 热力图日历插件，灵感来源于 GitHub 贡献图表。",
                  textAlign: TextAlign.center,
                ),
                const SizedBox(height: 30),
                // 使用 HeatMap 组件
                HeatMap(
                  aspectRatio: 2.3, // 设置热力图的宽高比
                  data: _data, // 提供数据
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}