Flutter计时器插件rocket_timer的使用

Flutter计时器插件rocket_timer的使用

rocket_timer 包提供了一个 RocketTimer 类，用于在 Flutter 应用程序中实现倒计时或普通计时器。此外，它还提供了一个 RocketTimerBuilder 小部件，用于构建响应 RocketTimer 对象变化的组件。该插件支持启动、暂停、停止、重置计时器，并且可以切换倒计时模式和正常模式。使用起来非常简单且易于自定义。

使用方法

要使用 RocketTimer 类，只需创建一个新的实例并调用其方法来控制计时器：

import 'package:rocket_timer/rocket_timer.dart';

final RocketTimer timer = RocketTimer(duration: 60, type: TimerType.countdown);

// 启动计时器
timer.start();

// 暂停计时器
timer.pause();

// 停止计时器
timer.stop();

// 重置计时器
timer.reset();

// 切换倒计时模式和正常模式
timer.switchMode();

要在小部件中显示计时器，可以使用 RocketTimerBuilder 小部件，该小部件监听 RocketTimer 对象的变化并相应地重建组件树：

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

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  final RocketTimer _rocketTimer = RocketTimer(duration: 60, type: TimerType.countdown);

  [@override](/user/override)
  void dispose() {
    _rocketTimer.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: RocketTimerBuilder(
          timer: _rocketTimer,
          builder: (BuildContext context) {
            return Text(
              _rocketTimer.formattedDuration,
              style: Theme.of(context).textTheme.headline1,
            );
          },
        ),
      ),
    );
  }
}

API 参考

有关 RocketTimer 类和 RocketTimerBuilder 小部件的完整 API 参考，请参阅 rocket_timer 包的文档。

完整示例代码

以下是完整的示例代码，展示了如何在 Flutter 应用程序中使用 rocket_timer 插件：

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:rocket_timer/rocket_timer.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Rocket Timer App'),
    );
  }
}

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

  final String title;

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

class MyHomePageState extends State<MyHomePage> {
  RocketTimer? _timer;
  late TextEditingController _durationController;
  bool _isCountdown = false;

  [@override](/user/override)
  void initState() {
    super.initState();
    _durationController = TextEditingController();
    _timer = RocketTimer(
        duration: const Duration(seconds: 0),
        type: _isCountdown ? TimerType.countdown : TimerType.normal);
  }

  [@override](/user/override)
  void dispose() {
    _durationController.dispose();
    _timer!.dispose();
    super.dispose();
  }

  void _startTimer() {
    int duration = int.tryParse(_durationController.text) ?? 0;
    setState(() {
      if (_timer!.status == TimerStatus.initial) {
        _timer!.kDuration = duration;
      }
      _timer!.start();
    });
  }

  void _pauseTimer() {
    _timer?.pause();
    setState(() {});
  }

  void _stopTimer() {
    _timer?.stop();
    setState(() {});
  }

  void _resetTimer() {
    _timer?.reset();
    _durationController.text = '';
  }

  void _switchTimerType(bool value) {
    _timer?.switchMode();
    setState(() {
      _isCountdown = value;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                const Text('倒计时模式'),
                Switch(
                  value: _isCountdown,
                  onChanged: (value) => _switchTimerType(value),
                ),
              ],
            ),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: TextField(
                controller: _durationController,
                keyboardType: TextInputType.number,
                inputFormatters: [FilteringTextInputFormatter.digitsOnly],
                decoration: const InputDecoration(
                    labelText: '持续时间（秒）',
                    border: OutlineInputBorder()),
              ),
            ),
            const SizedBox(height: 20),
            if (_timer != null)
              RocketTimerBuilder(
                  timer: _timer!,
                  builder: (context) {
                    return Text(
                      _timer!.formattedDuration,
                      style: Theme.of(context).textTheme.displayLarge,
                    );
                  }),
            const SizedBox(height: 20),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                ElevatedButton(
                  onPressed: _startTimer,
                  child: const Text('开始'),
                ),
                const SizedBox(width: 20),
                ElevatedButton(
                  onPressed: _pauseTimer,
                  child: const Text('暂停'),
                ),
                const SizedBox(width: 20),
                ElevatedButton(
                  onPressed: _stopTimer,
                  child: const Text('停止'),
                ),
                const SizedBox(width: 20),
                ElevatedButton(
                  onPressed: _resetTimer,
                  child: const Text('重置'),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}