Flutter雷达图绘制插件radar_chart的使用

插件简介

radar_chart 是一个为Flutter提供的灵活的雷达图/蜘蛛图组件，它具有强大的自定义能力。用户可以轻松地调整图表的颜色和大小等属性，以适应不同的应用场景。

• Pub地址: https://pub.dev/packages/radar_chart

使用示例

1. 添加依赖

首先，在项目的 pubspec.yaml 文件中添加 radar_chart 作为依赖：

dependencies:
  flutter:
    sdk: flutter
  radar_chart: ^0.2.0

然后执行 flutter pub get 来安装包。

2. 完整示例代码

下面是一个完整的示例，展示了如何在Flutter应用中使用 radar_chart 插件来创建一个动态更新的雷达图。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: RadarChartExample(title: 'Flutter Demo Home Page'),
    );
  }
}

class RadarChartExample extends StatefulWidget {
  const RadarChartExample({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _RadarChartExampleState createState() => _RadarChartExampleState();
}

class _RadarChartExampleState extends State<RadarChartExample> {
  int _counter = 3;
  List<double> values1 = [0.4, 0.8, 0.65];
  List<double> values2 = [0.5, 0.3, 0.85];
  late List<PreferredSizeWidget> vertices2;
  late PreferredSizeWidget _vertex;

  @override
  void initState() {
    super.initState();
    const double radius = 5;
    _vertex = PreferredSize(
      preferredSize: const Size.square(2 * radius),
      child: CircleAvatar(
        backgroundColor: Colors.red,
        radius: radius,
      ),
    );

    vertices2 = [_vertex, _vertex, _vertex];
  }

  void _incrementCounter() {
    final random = Random.secure();
    setState(() {
      _counter++;
      values1.add(random.nextDouble());
      values2.add(random.nextDouble());
      vertices2.add(_vertex);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      backgroundColor: Colors.grey.shade200,
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 40, vertical: 10),
              child: Text(
                "There are ${values1.length} values for each radar chart!",
                style: const TextStyle(fontSize: 30),
              ),
            ),
            // 第一个雷达图
            RadarChart(
              length: _counter,
              radius: 150,
              initialAngle: 0,
              backgroundColor: Colors.white,
              borderStroke: 2,
              borderColor: Colors.grey.shade300,
              radialStroke: 2,
              radialColor: Colors.grey.shade300,
              radars: [
                RadarTile(
                  values: values1,
                  borderStroke: 2,
                  borderColor: Colors.yellow,
                  backgroundColor: Colors.yellow.withOpacity(0.4),
                ),
                RadarTile(
                  values: values2,
                  borderStroke: 2,
                  borderColor: Colors.blue,
                  backgroundColor: Colors.blue.withOpacity(0.4),
                  vertices: vertices2,
                ),
              ],
            ),
            // 第二个雷达图（带顶点文本）
            RadarChart(
              length: 3,
              radius: 100,
              initialAngle: 0,
              backgroundColor: Colors.white,
              borderStroke: 2,
              borderColor: Colors.grey.shade300,
              radialStroke: 1,
              radialColor: Colors.grey.shade300,
              vertices: [
                for (int i = 0; i < 3; i++)
                  RadarVertex(
                    radius: 15,
                    textOffset: Offset(0, 0),
                    text: Text('$i'),
                  ),
              ],
              radars: [
                RadarTile(
                  radialColor: Colors.red,
                  values: values1,
                  borderStroke: 2,
                  borderColor: Colors.yellow,
                  backgroundColor: Colors.yellow.withOpacity(0.4),
                ),
                RadarTile(
                  radialColor: Colors.red,
                  values: values1,
                  borderStroke: 2,
                  borderColor: Colors.yellow,
                  backgroundColor: Colors.yellow.withOpacity(0.4),
                ),
                RadarTile(
                  radialColor: Colors.red,
                  values: values1,
                  borderStroke: 2,
                  borderColor: Colors.yellow,
                  backgroundColor: Colors.yellow.withOpacity(0.4),
                ),
              ],
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

class RadarVertex extends StatelessWidget with PreferredSizeWidget {
  const RadarVertex({
    required this.radius,
    this.text,
    this.textOffset,
  });

  final double radius;
  final Widget? text;
  final Offset? textOffset;

  @override
  Size get preferredSize => Size.fromRadius(radius);

  @override
  Widget build(BuildContext context) {
    Widget tree = CircleAvatar(
      radius: radius,
      backgroundColor: Colors.green,
    );
    if (text != null) {
      tree = Stack(
        children: [
          tree,
          Center(
            child: text,
          )
        ],
      );
    }
    return tree;
  }
}

3. 代码说明

• MyApp: 应用程序入口。
• RadarChartExample: 包含两个雷达图的页面，第一个是普通的雷达图，第二个带有顶点文本。
• _RadarChartExampleState: 状态管理类，负责更新图表数据。
• RadarVertex: 自定义顶点小部件，用于显示在雷达图的顶点位置。

通过这个例子，你可以看到如何配置雷达图的各种属性，如长度、半径、初始角度、背景颜色等，并且可以通过点击浮动按钮动态增加数据点。