Flutter自定义仪表盘插件customgauge_new的使用

customgauge_new

完全可定制的Flutter仪表盘小部件。

安装

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

dependencies:
  customgauge_new: 1.0.2

示例用法

import 'package:customgauge_new/customgauge_new.dart';

CustomGauge(
    gaugeSize: 200,
    segments: [
        GaugeSegment('低', 20, Colors.red),
        GaugeSegment('中', 40, Colors.orange),
        GaugeSegment('高', 40, Colors.green),
    ],
    currentValue: 46,
    displayWidget: Text('油箱燃油量', style: TextStyle(fontSize: 12)),
),

特性

• 完全功能的仪表盘小部件，从零开始构建。
• 可以有任意数量的段，并且每个段可以有不同的长度和颜色。
• 仪表盘可以设置为任何尺寸（仅限正方形），并且可以设置最小值和最大值。
• 指针的颜色可以自定义。
• 显示和数值小部件可以自定义，以便在仪表盘上显示所需的内容。
• 可以开启或关闭标记，这些标记用于显示仪表盘上的最小值和最大值。你甚至可以自定义这些标记的样式！

许可证

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

这个插件由jagan999开发，但后来被停止维护。我需要它，所以这里是dart 3版本。

示例代码

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

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

class MyApp extends StatefulWidget {
  const MyApp({super.key});

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

class MyAppState extends State<MyApp> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('CustomGauge 示例应用'),
        ),
        body: Container(
          color: Colors.grey[200],
          child: Column(
            children: [
              Expanded(
                child: ListView(
                  scrollDirection: Axis.horizontal,
                  children: [
                    CustomGauge(
                      gaugeSize: 200,
                      segments: [
                        GaugeSegment('低', 20, Colors.red),
                        GaugeSegment('中', 40, Colors.orange),
                        GaugeSegment('高', 40, Colors.green),
                      ],
                      currentValue: 60,
                      displayWidget: Text('油箱燃油量', style: TextStyle(fontSize: 12)),
                    ),
                    CustomGauge(
                      gaugeSize: 200,
                      segments: [
                        GaugeSegment('严重低', 10, Colors.red),
                        GaugeSegment('低', 20, Colors.orange),
                        GaugeSegment('中', 20, Colors.yellow),
                        GaugeSegment('高', 50, Colors.green),
                      ],
                      currentValue: 45,
                      needleColor: Colors.red,
                      showMarkers: false,
                      displayWidget: Text('油箱燃油量', style: TextStyle(fontSize: 12)),
                    ),
                  ],
                ),
              ),
              Expanded(
                child: ListView(
                  scrollDirection: Axis.horizontal,
                  children: [
                    CustomGauge(
                      gaugeSize: 100,
                      segments: [
                        GaugeSegment('低', 20, Colors.blue[200]!),
                        GaugeSegment('中', 40, Colors.blue),
                        GaugeSegment('高', 40, Colors.blue[800]!),
                      ],
                      currentValue: 70,
                      displayWidget: Text('温度', style: TextStyle(fontSize: 12)),
                    ),
                    CustomGauge(
                      gaugeSize: 100,
                      segments: [
                        GaugeSegment('严重低', 10, Colors.red),
                        GaugeSegment('低', 20, Colors.orange),
                        GaugeSegment('中', 20, Colors.yellow),
                        GaugeSegment('高', 50, Colors.green),
                      ],
                      currentValue: 45,
                      needleColor: Colors.blue,
                      showMarkers: false,
                      valueWidget: Container(),
                      displayWidget: Text('油箱燃油量', style: TextStyle(fontSize: 12)),
                    ),
                    CustomGauge(
                      gaugeSize: 100,
                      minValue: 30,
                      maxValue: 150,
                      segments: [
                        GaugeSegment('低', 20, Colors.red),
                        GaugeSegment('稍低', 20, Colors.yellow),
                        GaugeSegment('正常', 20, Colors.green),
                        GaugeSegment('高', 60, Colors.orange),
                      ],
                      currentValue: 72,
                      displayWidget: Text('脉搏', style: TextStyle(fontSize: 12)),
                    ),
                    CustomGauge(
                      gaugeSize: 100,
                      minValue: 0,
                      maxValue: 150,
                      segments: [
                        GaugeSegment('好', 80, Colors.green),
                        GaugeSegment('高', 70, Colors.red),
                      ],
                      currentValue: 75,
                      showMarkers: false,
                      displayWidget: Text('速度', style: TextStyle(fontSize: 12)),
                    ),
                  ],
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}