Flutter 插件的秒表计时器

秒表计时器

这是一个秒表计时器。

示例代码

有关使用 stop_watch_timer 的完整示例应用程序，请参阅示例目录。

示例

安装

将此添加到您的 package 的 pubspec.yaml 文件中

dependencies:
  stop_watch_timer:

用法

import 'package:stop_watch_timer/stop_watch_timer.dart';  // Import stop_watch_timer

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

class _MyAppState extends State<MyApp> {

  final StopWatchTimer _stopWatchTimer = StopWatchTimer(); // Create instance.

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

  @override
  void dispose() async {
    super.dispose();
    await _stopWatchTimer.dispose();  // Need to call dispose function.
  }

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

用于操作秒表。

// Start
_stopWatchTimer.onExecute.add(StopWatchExecute.start);


// Stop
_stopWatchTimer.onExecute.add(StopWatchExecute.stop);


// Reset
_stopWatchTimer.onExecute.add(StopWatchExecute.reset);


// Lap time
_stopWatchTimer.onExecute.add(StopWatchExecute.lap);

使用回调

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

使用流

显示格式化的秒表时间。使用“rawTime”和“getDisplayTime”函数。

_stopWatchTimer.rawTime.listen((value) => print('rawTime $value ${StopWatchTimer.getDisplayTime(value)}'));

使用流构建器的示例代码。

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
            ),
          ),
        ),
      ],
    );
  },
),
),

每秒从“secondTime”通知。

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

使用流构建器的示例代码。

StreamBuilder<int>(
  stream: _stopWatchTimer.secondTime,
  initialData: 0,
  builder: (context, snap) {
    final value = snap.data;
    print('Listen every second. $value');
    return Column(
      children: <Widget>[
        Padding(
          padding: const EdgeInsets.all(8),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              const Padding(
                padding: EdgeInsets.symmetric(horizontal: 4),
                child: Text(
                  'second',
                  style: TextStyle(
                      fontSize: 17,
                      fontFamily: 'Helvetica',
                  ),
                ),
              ),
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 4),
                child: Text(
                  value.toString(),
                  style: TextStyle(
                      fontSize: 30,
                      fontFamily: 'Helvetica',
                      fontWeight: FontWeight.bold
                  ),
                ),
              ),
            ],
          )
        ),
      ],
    );
  },
),

每分钟从“minuteTime”通知。

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

使用流构建器的示例代码。

StreamBuilder<int>(
  stream: _stopWatchTimer.minuteTime,
  initialData: 0,
  builder: (context, snap) {
    final value = snap.data;
    print('Listen every minute. $value');
    return Column(
      children: <Widget>[
        Padding(
            padding: const EdgeInsets.all(8),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                const Padding(
                  padding: EdgeInsets.symmetric(horizontal: 4),
                  child: Text(
                    'minute',
                    style: TextStyle(
                      fontSize: 17,
                      fontFamily: 'Helvetica',
                    ),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 4),
                  child: Text(
                    value.toString(),
                    style: TextStyle(
                        fontSize: 30,
                        fontFamily: 'Helvetica',
                        fontWeight: FontWeight.bold
                    ),
                  ),
                ),
              ],
            )
        ),
      ],
    );
  },
),

通知圈数时间。

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

使用流构建器的示例代码。

StreamBuilder<List<StopWatchRecord>>(
  stream: _stopWatchTimer.records,
  initialData: const [],
  builder: (context, snap) {
    final value = snap.data;
    return ListView.builder(
      scrollDirection: Axis.vertical,
      itemBuilder: (BuildContext context, int index) {
        final data = value[index];
        return Column(
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.all(8),
              child: Text(
                '${index + 1} ${data.displayTime}',
                style: TextStyle(
                  fontSize: 17,
                  fontFamily: 'Helvetica',
                  fontWeight: FontWeight.bold
                ),
              ),
            ),
            const Divider(height: 1,)
          ],
        );
      },
      itemCount: value.length,
    );
  },
),

解析时间

可以使用 getDisplayTime 函数。它会像真正的秒表计时器一样显示时间。

• 小时
• 分钟
• 秒
• 毫秒

例如，1小时30分钟50秒20毫秒 => “01:30:50.20”

还可以设置显示时间的启用/禁用和更改分隔符。

设置预设时间

可以设置预设时间。此情况为“00:01.23”。
当计时器处于空闲状态时，可以设置此项。

// Set Millisecond.
_stopWatchTimer.setPresetTime(mSec: 1234);

// Set Hours. (ex. 1 hours)
_stopWatchTimer.setPresetHoursTime(1);

// Set Minute. (ex. 30 minute)
_stopWatchTimer.setPresetMinuteTime(30);

// Set Second. (ex. 120 second)
_stopWatchTimer.setPresetSecondTime(120);

GitHub

https://github.com/hukusuke1007/stop_watch_timer