Flutter仪表盘插件speedometer的使用

Flutter仪表盘插件speedometer的使用

SpeedOMeter 插件介绍

SpeedOMeter 是一个用于创建速度表的 Flutter 插件。它可以根据给定的 Observable 更新速度表。

开始使用

首先，确保在你的 Flutter 项目中添加以下依赖：

dependencies:
  speedometer: "^1.2.0"

然后运行 flutter packages upgrade 或者在 IntelliJ 中更新你的包。

在 Dart 代码中使用它：

import 'package:speedometer/speedometer.dart';

示例代码

下面是一个完整的示例代码，展示如何使用 SpeedOMeter 插件。

import 'dart:async';
import 'dart:math';

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'SpeedOMeter Example'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  double _lowerValue = 20.0;
  double _upperValue = 40.0;
  int start = 0;
  int end = 60;

  int counter = 0;

  Duration _animationDuration = Duration(milliseconds: 100);

  PublishSubject<double> eventObservable = PublishSubject();

  [@override](/user/override)
  void initState() {
    super.initState();
    const click = const Duration(milliseconds: 500);
    var rng = Random();
    Timer.periodic(click,
        (Timer t) =&gt; eventObservable.add(rng.nextInt(59) + rng.nextDouble()));
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    final ThemeData theme = ThemeData();
    ThemeData somTheme = theme.copyWith(
      colorScheme: theme.colorScheme.copyWith(
        primary: Colors.blue,
        secondary: Colors.black,
        background: Colors.grey,
      ),
    );
    var speedOMeter = SpeedOMeter(
      start: start,
      end: end,
      highlightStart: (_lowerValue / end),
      highlightEnd: (_upperValue / end),
      themeData: somTheme,
      eventObservable: this.eventObservable,
      animationDuration: _animationDuration,
    );
    return Scaffold(
      appBar: AppBar(
        title: Text("SpeedOMeter"),
      ),
      body: Column(
        children: [
          Padding(
            padding: EdgeInsets.all(40.0),
            child: speedOMeter,
          ),
          ElevatedButton(
            onPressed: () {
              setState(() {
                _animationDuration += Duration(milliseconds: 100);
              });
            },
            child: Text('Slower...'),
          ),
          ElevatedButton(
            onPressed: () {
              setState(() {
                _animationDuration -= Duration(milliseconds: 100);
              });
            },
            child: Text('Faster!'),
          ),
        ],
      ),
    );
  }
}