Flutter速度表插件alxgration_speedometer的使用

自定义速度表小部件用于Flutter（Android、iOS），带有onComplete可观察方法。

开始使用

为了在您的Flutter项目中使用此包，需要添加以下依赖项：

dependencies:
  alxgration_speedometer: ^0.0.1

然后，如果您使用的是Android Studio，请点击“获取Pub”按钮。否则，请运行flutter packages upgrade命令。

在您的Dart代码中，添加导入语句：

import 'package:alxgration_speedometer/speedometer.dart';

使用方式

以下是包使用的简短示例。更多示例可以在/example文件夹中找到。

Speedometer(
    size: 200, // 速度表的大小
    minValue: 0, // 最小值
    maxValue: 10, // 最大值
    currentValue: progress, // 当前值
    barColor: Colors.purple, // 指针的颜色
    pointerColor: Colors.black, // 指针的颜色
    displayText: "km/h", // 显示的文本
    displayTextStyle: TextStyle(fontSize: 14, color: Colors.deepOrange), // 文本样式
    displayNumericStyle: TextStyle(fontSize: 24, color: Colors.red), // 数字样式
    onComplete: (){ // 完成时的回调函数
        print("ON COMPLETE");
    },
);

示例代码

以下是完整的示例代码，展示了如何在Flutter应用中使用alxgration_speedometer插件。

import 'package:flutter/material.dart';
import 'package:alxgration_speedometer/speedometer.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
          colorScheme: ColorScheme.fromSwatch(
              primarySwatch: Colors.deepPurple,
              accentColor: Colors.deepOrangeAccent)),
      home: MyHomePage(),
    );
  }
}

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

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int progress = 0; // 当前进度
  int maxVal = 5; // 最大值

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("我的速度表小部件"),
        ),
        body: Column(children: [
          Speedometer(
            size: 200, // 速度表的大小
            minValue: 0, // 最小值
            maxValue: maxVal, // 最大值
            currentValue: progress, // 当前值
            barColor: Colors.purple, // 指针的颜色
            pointerColor: Colors.black, // 指针的颜色
            displayText: "km/h", // 显示的文本
            displayTextStyle: TextStyle(fontSize: 24, color: Colors.deepOrange), // 文本样式
            displayNumericStyle: TextStyle(fontSize: 24, color: Colors.red), // 数字样式
            onComplete: () {
              showSnackbar(); // 完成时显示提示信息
            },
          ),
          ElevatedButton(
              onPressed: () {
                increaseProgress(); // 增加进度
              },
              child: Text("开始"))
        ])
    );
  }

  // 显示Snackbar提示信息
  void showSnackbar() {
    WidgetsBinding.instance.addPostFrameCallback((_){
      ScaffoldMessenger.of(context).showSnackBar(
          const SnackBar(
            content: Text("完成！"),
          )
      );
    });
  }

  // 增加进度
  void increaseProgress() async {
    for (int i = 0; i < maxVal; i++) {
      var j = Future.delayed(const Duration(seconds: 1), () {
        return i;
      });
      progress = (await j) + 1;
      setState(() {}); // 更新UI
    }
  }
}