Flutter计时器插件stop_watch_timer的使用

stop_watch_timer 是一个用于Flutter应用程序的简单计时器插件，可以轻松创建倒计时或正计时的应用。它由Never inc开发，并提供了丰富的功能和良好的用户体验。

安装

在项目的 pubspec.yaml 文件中添加依赖：

dependencies:
  stop_watch_timer: latest_version

请将 latest_version 替换为 Pub.dev 上提供的最新版本号。

特性

• CountUp：正计时模式。
• CountDown：倒计时模式。

使用方法

创建实例

import 'package:stop_watch_timer/stop_watch_timer.dart';

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  final StopWatchTimer _stopWatchTimer = StopWatchTimer(); // 创建实例。

  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() async {
    super.dispose();
    await _stopWatchTimer.dispose();  // 需要调用dispose函数。
  }

  @override
  Widget build(BuildContext context) {
    ...
  }
}

操作计时器

// 启动计时器
_stopWatchTimer.onStartTimer();

// 停止计时器
_stopWatchTimer.onStopTimer();

// 重置计时器
_stopWatchTimer.onResetTimer();

// 添加圈数
_stopWatchTimer.onAddLap();

设置预设时间

// 设置毫秒数
_stopWatchTimer.setPresetTime(mSec: 1234);

// 设置小时数
_stopWatchTimer.setPresetHoursTime(1);

// 设置分钟数
_stopWatchTimer.setPresetMinuteTime(30);

// 设置秒数
_stopWatchTimer.setPresetSecondTime(120);

使用Stream获取时间

_stopWatchTimer.rawTime.listen((value) => print('rawTime $value'));

_stopWatchTimer.minuteTime.listen((value) => print('minuteTime $value'));

_stopWatchTimer.secondTime.listen((value) => print('secondTime $value'));

_stopWatchTimer.records.listen((value) => print('records $value'));

_stopWatchTimer.fetchStopped.listen((value) => print('stopped from stream'));

_stopWatchTimer.fetchEnded.listen((value) => print('ended from stream'));

显示格式化的时间

final raw = 3000; // 3秒
final displayTime = StopWatchTimer.getDisplayTime(raw); // 00:00:03.00

使用StreamBuilder获取时间

StreamBuilder<int>(
  stream: _stopWatchTimer.rawTime,
  initialData: 0,
  builder: (context, snap) {
    final value = snap.data;
    final displayTime = StopWatchTimer.getDisplayTime(value);
    return Column(
      children: <Widget>[
        Padding(
          padding: const EdgeInsets.all(8),
          child: Text(
            displayTime,
            style: TextStyle(
              fontSize: 40,
              fontFamily: 'Helvetica',
              fontWeight: FontWeight.bold
            ),
          ),
        ),
        Padding(
          padding: const EdgeInsets.all(8),
          child: Text(
            value.toString(),
            style: TextStyle(
                fontSize: 16,
                fontFamily: 'Helvetica',
                fontWeight: FontWeight.w400
            ),
          ),
        ),
      ],
    );
  },
),

使用回调获取时间

final _stopWatchTimer = StopWatchTimer(
  onChange: (value) {
    final displayTime = StopWatchTimer.getDisplayTime(value);
    print('displayTime $displayTime');
  },
  onChangeRawSecond: (value) => print('onChangeRawSecond $value'),
  onChangeRawMinute: (value) => print('onChangeRawMinute $value'),
);

示例代码

以下是一个完整的示例代码，展示了如何使用 stop_watch_timer 插件创建一个简单的计时器应用：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CountUpTimerPage(),
    );
  }
}

class CountUpTimerPage extends StatefulWidget {
  @override
  _CountUpTimerPageState createState() => _CountUpTimerPageState();
}

class _CountUpTimerPageState extends State<CountUpTimerPage> {
  final StopWatchTimer _stopWatchTimer = StopWatchTimer(mode: StopWatchMode.countUp);

  @override
  void dispose() async {
    super.dispose();
    await _stopWatchTimer.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Count Up Timer'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            StreamBuilder<int>(
              stream: _stopWatchTimer.rawTime,
              initialData: 0,
              builder: (context, snap) {
                final value = snap.data;
                final displayTime = StopWatchTimer.getDisplayTime(value);
                return Text(
                  displayTime,
                  style: TextStyle(fontSize: 50, fontWeight: FontWeight.bold),
                );
              },
            ),
            SizedBox(height: 20),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                ElevatedButton(
                  onPressed: () {
                    _stopWatchTimer.onStartTimer();
                  },
                  child: Text('Start'),
                ),
                ElevatedButton(
                  onPressed: () {
                    _stopWatchTimer.onStopTimer();
                  },
                  child: Text('Stop'),
                ),
                ElevatedButton(
                  onPressed: () {
                    _stopWatchTimer.onResetTimer();
                  },
                  child: Text('Reset'),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

这个示例代码创建了一个简单的正计时页面，用户可以通过按钮来启动、停止和重置计时器。通过 StreamBuilder 实时显示当前的时间。