Flutter仪表盘插件another_gauge的使用

Flutter仪表盘插件another_gauge的使用

插件简介

another_gauge 是一个为 Flutter 提供的高度可定制化的仪表盘小部件。它允许开发者轻松创建各种类型的仪表盘，适用于速度表、温度计等场景。

安装

在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  another_gauge: 1.1.0

许可证

该项目采用 BSD 2-Clause 许可证，详情请参阅 LICENSE 文件。

示例图片

完整示例代码

以下是使用 another_gauge 插件的完整示例代码，包含了一个简单的仪表盘和一些交互功能：

import 'package:another_gauge/another_gauge.dart';
import 'package:flutter/material.dart';

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

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

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

class _MyAppState extends State<MyApp> {
  // 创建一个 ValueNotifier 来管理仪表盘的值
  ValueNotifier<double> valueNotifier = ValueNotifier(0);
  // 创建一个 ValueNotifier 来管理主刻度线的显示状态
  ValueNotifier<bool> tickNotifier = ValueNotifier(false);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('AnotherGauge 示例'),
        ),
        body: Column(
          children: [
            // 顶部控制栏
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  const Text('显示主刻度线'),
                  // 切换按钮，用于控制主刻度线的显示
                  StatefulBuilder(builder: (context, setState) {
                    return Switch(
                      value: tickNotifier.value,
                      onChanged: (value) => setState(() => tickNotifier.value = !tickNotifier.value),
                    );
                  }),
                  // 增加按钮，用于增加仪表盘的值
                  ElevatedButton(
                    onPressed: () {
                      valueNotifier.value += 15;
                    },
                    child: const Text('增加'),
                  ),
                  const SizedBox(width: 16),
                  // 减少按钮，用于减少仪表盘的值
                  ElevatedButton(
                    onPressed: () {
                      valueNotifier.value -= 15;
                    },
                    child: const Text('减少'),
                  ),
                ],
              ),
            ),
            // 仪表盘部分
            Expanded(
              child: Padding(
                padding: const EdgeInsets.all(32.0),
                child: ListView(
                  children: [
                    // 仪表盘组件
                    Container(
                      color: Colors.grey[200],
                      child: ValueListenableBuilder(
                        valueListenable: tickNotifier,
                        builder: (context, val, child) {
                          return AnotherGauge(
                            valueNotifier: valueNotifier, // 绑定值
                            capBorderColor: Colors.white, // 仪表盘帽边框颜色
                            capBorderWidth: 10, // 仪表盘帽边框宽度
                            capSize: 80, // 仪表盘帽大小
                            capColor: Colors.white10, // 仪表盘帽颜色
                            faceBorderColor: Colors.blueGrey.shade800, // 表盘边框颜色
                            faceStartColor: Colors.teal, // 表盘起始颜色
                            faceEndColor: Colors.cyan, // 表盘结束颜色
                            faceBorderWidth: 15, // 表盘边框宽度
                            subTicksColor: Colors.white, // 次刻度线颜色
                            needleColor: Colors.white, // 指针颜色
                            showMainTickValue: tickNotifier.value, // 是否显示主刻度线
                            mainTicksColor: Colors.white, // 主刻度线颜色
                            rangeNeedleColor: true, // 是否根据范围改变指针颜色
                            frameAngle: 0, // 表盘框架角度
                            frameColor: Colors.blueGrey.shade600, // 表盘框架颜色
                            segmentWidth: 15, // 表盘分段宽度
                            showFrame: false, // 是否显示表盘框架
                            gaugeSize: 350, // 仪表盘大小
                            needleStartAngle: 135, // 指针起始角度
                            needleSweepAngle: 270, // 指针扫过的角度
                            ranges: [
                              GaugeRange(Colors.green), // 绿色范围
                              GaugeRange(Colors.orange), // 橙色范围
                              GaugeRange(Colors.red), // 红色范围
                            ],
                            valuePadding: const EdgeInsets.only(bottom: 90), // 值的内边距
                            valueSymbol: 'km/h', // 值的单位
                            valueFontColor: Colors.white, // 值的颜色
                            displayWidget: const Padding(
                              padding: EdgeInsets.only(top: 36.0),
                              child: Text(
                                'Speed',
                                style: TextStyle(color: Colors.white, fontSize: 16, fontWeight: FontWeight.bold),
                              ),
                            ),
                            minValue: 0, // 最小值
                            maxValue: 280, // 最大值
                            mainTicksStep: 20, // 主刻度线的步长
                          );
                        },
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}