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

Flutter Heatmap Calendar提供了两种热力图展示方式：HeatMap 和 HeatMapCalendar。这两种方式都受到GitHub贡献图表的启发。

开始使用

添加依赖

在你的项目中添加 flutter_heatmap_calendar 依赖：

flutter pub add flutter_heatmap_calendar

或者，在你的 pubspec.yaml 文件中添加以下行：

dependencies:
  flutter_heatmap_calendar: ^1.0.6

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

导入库

在你的 Dart 文件中导入 flutter_heatmap_calendar 库：

import 'package:flutter_heatmap_calendar/flutter_heatmap_calendar.dart';

属性

HeatMap

以下是 HeatMap 组件的属性：

HeatMapCalendar

以下是 HeatMapCalendar 组件的属性：

示例

使用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())));
  },
);

完整示例Demo

import 'package:flutter/material.dart';
import 'pages/heatmap_calendar_example.dart';
import 'pages/heatmap_example.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Heatmap Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      initialRoute: '/',
      routes: {
        '/': (context) => const MyHomePage(),
        '/heatmap_calendar': (context) => const HeatMapCalendarExample(),
        '/heatmap': (context) => const HeatMapExample(),
      },
    );
  }
}

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

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Flutter heatmap example')),
      body: SafeArea(
        child: ListView(
          children: [
            ListTile(
              title: const Text('Heatmap calendar'),
              onTap: () => Navigator.of(context).pushNamed('/heatmap_calendar'),
            ),
            ListTile(
              title: const Text('Heatmap'),
              onTap: () => Navigator.of(context).pushNamed('/heatmap'),
            ),
          ],
        ),
      ),
    );
  }
}