Flutter仪表盘速度计插件flutter_speedometer_new的使用

flutter_speedometer 新插件介绍

Flutter Speedometer widget 包

开始使用

为了使用此包，需要导入以下代码：

import 'package:flutter_speedometer_new/flutter_speedometer.dart';

基本实现可以像下面的代码一样：

import 'package:flutter/material.dart';
import 'package:flutter_speedometer_new/flutter_speedometer.dart';

void main() {
  runApp(
    Center(
      child: Speedometer(
        size: 250,          // 设置仪表盘大小为250
        minValue: 0,        // 最小值为0
        maxValue: 180,      // 最大值为180
        currentValue: 76,   // 当前值为76
        warningValue: 150,  // 警告值为150
        displayText: 'mph', // 显示单位为mph
      ),
    ),
  );
}

示例应用

你可以在示例应用中找到更多例子。

API

在这个表格中，你可以找到此包提供的所有属性：

属性 默认值 描述
size 200 仪表盘的大小
minValue 0 显示的最小值
maxValue 100 显示的最大值
currentValue 0 设置当前值
warningValue 80 设置警告值

对象

class Speedometer {

    final double size;           // 仪表盘大小
    final int minValue;          // 最小值
    final int maxValue;          // 最大值
    final int currentValue;      // 当前值
    final int warningValue;      // 警告值
    final Color backgroundColor; // 背景颜色
    final Color meterColor;      // 指针颜色
    final Color warningColor;    // 警告颜色
    final Color kimColor;        // 其他颜色
    final TextStyle displayNumericStyle; // 数字样式
    final String displayText;    // 显示的文本
    final TextStyle displayTextStyle;    // 文本样式
}

反馈

如果你有任何反馈，欢迎在 GitHub 上留下，帮助支持这个包 🍻

完整示例代码

以下是完整的示例代码，展示如何使用 flutter_speedometer_new 插件创建一个速度计：

import 'package:flutter/material.dart';
import 'package:flutter_speedometer_new/flutter_speedometer.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Speedometer Example'),
        ),
        body: Center(
          child: Speedometer(
            size: 250,          // 仪表盘大小
            minValue: 0,        // 最小值
            maxValue: 180,      // 最大值
            currentValue: 76,   // 当前值
            warningValue: 150,  // 警告值
            displayText: 'mph', // 单位
            backgroundColor: Colors.grey[200], // 背景颜色
            meterColor: Colors.red,             // 指针颜色
            warningColor: Colors.orange,        // 警告颜色
            displayTextStyle: TextStyle(
              fontSize: 16,
              fontWeight: FontWeight.bold,
              color: Colors.black,
            ), // 文本样式
            displayNumericStyle: TextStyle(
              fontSize: 24,
              fontWeight: FontWeight.bold,
              color: Colors.blue,
            ), // 数字样式
          ),
        ),
      ),
    );
  }
}

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

1 回复

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


flutter_speedometer_new 是一个用于在 Flutter 应用中创建速度计（Speedometer）的插件。它可以帮助你轻松地实现一个美观的速度计，用于显示速度、进度或其他数值。

安装插件

首先，你需要在 pubspec.yaml 文件中添加 flutter_speedometer_new 依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_speedometer_new: ^0.0.3  # 请检查最新版本

然后运行 flutter pub get 来安装依赖。

基本用法

以下是一个简单的示例，展示如何使用 flutter_speedometer_new 插件创建一个速度计：

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

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

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

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

class _SpeedometerExampleState extends State<SpeedometerExample> {
  double speed = 0.0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Speedometer Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Speedometer(
              size: 300,
              minValue: 0,
              maxValue: 200,
              currentValue: speed,
              displayNumericValue: true,
              numericValueStyle: TextStyle(
                fontSize: 24,
                fontWeight: FontWeight.bold,
              ),
              labelText: 'km/h',
              labelTextStyle: TextStyle(
                fontSize: 18,
                color: Colors.black,
              ),
              needleColor: Colors.red,
              startAngle: 180,
              endAngle: 0,
              segments: [
                SpeedometerSegment(
                  color: Colors.green,
                  startValue: 0,
                  endValue: 100,
                ),
                SpeedometerSegment(
                  color: Colors.orange,
                  startValue: 100,
                  endValue: 150,
                ),
                SpeedometerSegment(
                  color: Colors.red,
                  startValue: 150,
                  endValue: 200,
                ),
              ],
            ),
            SizedBox(height: 20),
            Slider(
              value: speed,
              min: 0,
              max: 200,
              onChanged: (value) {
                setState(() {
                  speed = value;
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}
回到顶部