Flutter仪表盘插件geekyants_flutter_gauges的使用

发布于 1周前 作者 h691938207 来自 Flutter

Flutter仪表盘插件geekyants_flutter_gauges的使用

描述

geekyants_flutter_gauges 是一个Flutter插件，它提供了一种简单而高效的方法来绘制和展示机器信息。这个包提供了两种主要类型的仪表：线性仪表（Linear Gauge）和径向仪表（Radial Gauge）。这些组件可以用于显示各种度量信息，如进度、温度、速度等。

安装与配置

添加依赖

要开始使用此库，请先在您的pubspec.yaml文件中添加依赖：

dependencies:
  geekyants_flutter_gauges: ^1.0.4

然后运行以下命令以安装包：

flutter pub get

导入库

接下来，在需要使用的Dart文件顶部导入该库：

import 'package:geekyants_flutter_gauges/geekyants_flutter_gauges.dart';

示例代码

线性仪表 (Linear Gauge) 示例

下面是一个简单的线性仪表示例，展示了如何创建一个带有动画效果的水平方向的线性仪表，并设置指针的位置。

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

void main() {
  runApp(
    const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: LinearGaugeExample(),
    ),
  );
}

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

  @override
  State<LinearGaugeExample> createState() => _LinearGaugeExampleState();
}

class _LinearGaugeExampleState extends State<LinearGaugeExample> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Linear Gauge Example')),
      body: Center(
        child: LinearGauge(
          gaugeOrientation: GaugeOrientation.horizontal, // 设置为水平方向
          enableGaugeAnimation: true, // 启用动画
          rulers: RulerStyle(
            rulerPosition: RulerPosition.bottom, // 尺寸位于底部
          ),
          pointers: const [
            Pointer(
              value: 50, // 指针指向50%
              shape: PointerShape.circle, // 圆形指针
            ),
          ],
        ),
      ),
    );
  }
}

径向仪表 (Radial Gauge) 示例

这里是如何创建一个径向仪表的例子，其中包含了一个从0到100范围内的指针，初始值设为30。

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

void main() {
  runApp(
    const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: RadialGaugeExample(),
    ),
  );
}

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

  @override
  State<RadialGaugeExample> createState() => _RadialGaugeExampleState();
}

class _RadialGaugeExampleState extends State<RadialGaugeExample> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(title: Text('Radial Gauge Example')),
      body: Center(
        child: RadialGauge(
          track: RadialTrack(
            start: 0,
            end: 100,
          ),
          needlePointer: [
            NeedlePointer(
              value: 30, // 初始值为30
            ),
          ],
        ),
      ),
    );
  }
}

以上就是geekyants_flutter_gauges的基本用法介绍，您可以根据实际需求调整参数来自定义仪表样式和功能。更多高级特性和自定义选项请参考官方文档或查看提供的Demo应用程序。


更多关于Flutter仪表盘插件geekyants_flutter_gauges的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter仪表盘插件geekyants_flutter_gauges的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是一个使用 geekyants_flutter_gauges（请注意，正确的包名可能是 geekyants_flutter_gauges 的一个变种或类似名称，但基于当前信息，我将假设为 geekyants_flutter_gauges）插件创建简单仪表盘应用的示例代码。

首先，你需要在你的 Flutter 项目的 pubspec.yaml 文件中添加该插件的依赖项：

dependencies:
  flutter:
    sdk: flutter
  geekyants_flutter_gauges: ^latest_version  # 请替换为实际可用的最新版本号

然后，运行 flutter pub get 来获取依赖项。

接下来，在你的 Dart 文件中（例如 main.dart），你可以按照以下方式使用 geekyants_flutter_gauges 插件来创建一个仪表盘：

import 'package:flutter/material.dart';
import 'package:geekyants_flutter_gauges/geekyants_flutter_gauges.dart'; // 请确保导入正确的包名

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

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

class GaugeScreen extends StatefulWidget {
  @override
  _GaugeScreenState createState() => _GaugeScreenState();
}

class _GaugeScreenState extends State<GaugeScreen> with SingleTickerProviderStateMixin {
  double _value = 50.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Gauge Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Current Value: $_value',
              style: TextStyle(fontSize: 24),
            ),
            SizedBox(height: 20),
            // 创建仪表盘
            RadialGauge(
              size: 200,
              minValue: 0,
              maxValue: 100,
              needleColor: Colors.blue,
              needleWidth: 5,
              value: _value,
              // 你可以根据需要自定义更多属性
              label: 'Gauge',
              unit: '%',
              backgroundColor: Colors.grey[200],
              circleColor: Colors.grey[300],
              circleStrokeWidth: 10,
              waveAnimation: true,
              waveHeight: 20,
              waveCount: 3,
              waveColor: Colors.blue[300]!,
              center: Text(
                '$_value%',
                style: TextStyle(fontSize: 36, color: Colors.black),
              ),
            ),
            SizedBox(height: 20),
            Slider(
              value: _value.toDouble(),
              min: 0,
              max: 100,
              onChanged: (newValue) {
                setState(() {
                  _value = newValue.toDouble();
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的 Flutter 应用，其中包含一个仪表盘和一个滑块。滑块的值用于动态更新仪表盘的值。

请注意，geekyants_flutter_gauges 插件的具体属性和方法可能会根据其版本有所不同。因此，请确保查阅该插件的官方文档以获取最新的使用指南和可用的属性。

此外，如果插件的实际名称与 geekyants_flutter_gauges 不同，请确保将上述代码中的导入语句和依赖项名称替换为正确的插件名称。

回到顶部