Flutter热力图展示插件 flutter_heat_map 的使用

简介

flutter_heat_map 是一个用于生成热力图的 Flutter 插件。通过提供基础图像和事件坐标，该库可以返回带有热力图效果的图像。

特点

• 简化了热力图的生成。
• 从基础图像开始，传递事件坐标，返回带有热力图的图像。
• 受到 round_spot 的启发。

使用方法

导入包

首先，在你的 Dart 文件中导入 flutter_heat_map 包：

import 'package:flutter_heat_map/flutter_heat_map.dart';

创建 HeatMapPage

获取 HeatMapPage 对象：

HeatMapPage data = await getHeatMapPage();

处理数据

使用 HeatMap.process(data) 方法处理数据：

Uint8List? bytes = await HeatMap.process(data);

显示图像

使用 Image.memory(bytes) 在屏幕上显示热力图：

Image.memory(bytes)

示例代码

以下是一个完整的示例 Demo，展示了如何使用 flutter_heat_map 来生成并显示热力图。

完整示例

import 'package:flutter/material.dart';
import 'dart:typed_data';
import 'dart:ui' as ui;
import 'package:flutter_heat_map/flutter_heat_map.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HeatMapScreen(),
    );
  }
}

class HeatMapScreen extends StatefulWidget {
  [@override](/user/override)
  _HeatMapScreenState createState() => _HeatMapScreenState();
}

class _HeatMapScreenState extends State<HeatMapScreen> {
  Uint8List? _imageBytes;

  [@override](/user/override)
  void initState() {
    super.initState();
    _loadHeatMap();
  }

  Future<void> _loadHeatMap() async {
    HeatMapPage? heatMapPage = await getHeatMapPage("first_page");
    if (heatMapPage != null) {
      Uint8List? bytes = await HeatMap.process(heatMapPage);
      setState(() {
        _imageBytes = bytes;
      });
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Heat Map Example'),
      ),
      body: Center(
        child: _imageBytes != null
            ? Image.memory(_imageBytes!)
            : CircularProgressIndicator(),
      ),
    );
  }
}

Future<HeatMapPage?> getHeatMapPage(String page) async {
  ImageProvider? provider = await getImageProviderPerPage(page);
  if (provider == null) return null;
  ui.Image? image = await HeatMap.imageProviderToUiImage(provider);

  List<HeatMapEvent> events = await getEventsPerPage(page);

  return HeatMapPage(image: image, events: events);
}

Future<ImageProvider?> getImageProviderPerPage(String page) async {
  switch (page) {
    case "first_page":
      return AssetImage('assets/first_page.png');
    case "second_page":
      return AssetImage('assets/second_page.png');
    case "generate_heatmap_page":
      return AssetImage('assets/generate_heatmap_page.png');
    default:
      return null;
  }
}

Future<List<HeatMapEvent>> getEventsPerPage(String page) async {
  switch (page) {
    case "first_page":
      return [
        ..._generateEvents(1, Offset(510, 340)),
        ..._generateEvents(5, Offset(820, 560)),
        ..._generateEvents(100, Offset(250, 1250)),
        ..._generateEvents(1000, Offset(760, 1250)),
      ];
    case "second_page":
      return [
        ..._generateEvents(1000, Offset(510, 340)),
        ..._generateEvents(500, Offset(820, 560)),
        ..._generateEvents(100, Offset(250, 1250)),
        ..._generateEvents(10, Offset(760, 1250)),
      ];
    case "generate_heatmap_page":
      return [
        ..._generateEvents(10, Offset(510, 340)),
        ..._generateEvents(500, Offset(820, 560)),
        ..._generateEvents(1500, Offset(250, 1250)),
        ..._generateEvents(5000, Offset(760, 1250)),
      ];
    default:
      return [];
  }
}

List<HeatMapEvent> _generateEvents(int length, Offset location) =>
    List<HeatMapEvent>.filled(length, HeatMapEvent(location: location));