Flutter计时器功能插件my_timer的使用

Flutter计时器功能插件my_timer的使用

MyTimer 是一个灵活且可定制的 Flutter 计时器小部件。它允许开发者轻松地在他们的应用中集成计时器功能，支持递增和递减计时器。通过控制启动/停止功能、滴答间隔以及每个滴答和完成时的回调，MyTimer 是处理定时事件、倒计时等功能的理想解决方案。

特性

• 支持递增或递减计时器功能。
• 可自定义滴答间隔（例如每秒、每分钟等）。
• 通过 MyTimerController 程序化地启动、停止和重置计时器。
• 每个滴答的回调函数。
• 计时器完成时的回调函数。
• 可传递自定义子小部件以替代默认时间显示。
• 可自定义计时器显示的文本样式。
• 适用于倒计时计时器、时间追踪器或事件计时器。

安装

命令：

$ flutter pub add my_timer

pubspec.yaml:

dependencies:
  my_timer: ^1.0.0

使用

import 'package:my_timer/my_timer.dart';
import 'package:my_timer/my_timer_controller.dart';

MyTimer(
  isIncrementing: true,
  startTimerInSeconds: 0,
  endTimerInSeconds: 60,
  tickInSecond: const Duration(seconds: 1),
  controller: _timerController,
  style: const TextStyle(color: Colors.red, fontSize: 24),
  child: const Text('Custom Timer'),
)

ElevatedButton(
  onPressed: () {
    _timerController.start();
  },
  child: const Text('Start Timer'),
),

ElevatedButton(
  onPressed: () {
    _timerController.stop();
  },
  child: const Text('Stop Timer'),
)

自定义计时器

你可以通过调整各种属性来自定义 MyTimer 以满足你的特定需求：

1. tickInSecond：定义滴答间隔。默认为 1 秒。
2. isIncrementing：指定计时器是否应向上计数 (true) 或向下计数 (false)。
3. startTimerInSeconds：设置开始时间（秒）。
4. endTimerInSeconds：定义计时器何时结束。
5. controller：使用 MyTimerController 来程序化地启动和停止计时器。
6. child：传递一个自定义小部件来显示而不是默认的时间显示。
7. style：自定义时间显示的文本样式。

示例：递减计时器

以下是一个递减计时器的示例：

MyTimer(
  isIncrementing: false,
  startTimerInSeconds: 120,
  endTimerInSeconds: 0,
  tickInSecond: const Duration(seconds: 1),
  controller: _timerController,
  style: const TextStyle(color: Colors.green, fontSize: 24),
)

MyTimerController

MyTimerController 允许你程序化地控制计时器。你可以使用以下方法启动、停止或获取当前剩余时间：

• start()：启动计时器。
• stop()：停止计时器。
• getTimer()：以 Duration 的形式获取当前剩余时间。

示例：使用 MyTimerController

以下是一个使用 MyTimerController 的示例：

final MyTimerController _timerController = MyTimerController();

ElevatedButton(
  onPressed: () {
    _timerController.start();
  },
  child: const Text('Start Timer'),
),

ElevatedButton(
  onPressed: () {
    _timerController.stop();
  },
  child: const Text('Stop Timer'),
),

示例代码

以下是一个完整的示例代码，展示了如何使用 MyTimer 和 MyTimerController：

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:my_timer/my_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: 'My Timer Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'My Timer Home Page'),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  late MyTimerController _timerController; // 控制器来管理计时器
  bool isTimerRunning = false; // 跟踪计时器状态
  int elapsedTimeInSeconds = 0; // 跟踪经过时间
  int timerDuration = 10; // 默认计时器持续时间
  String? errorMessage; // 变量用于错误消息

  [@override](/user/override)
  void initState() {
    super.initState();
    // 初始化计时器控制器并设置滴答和完成时的回调
    _timerController = MyTimerController(
      onTick: (remainingDuration) {
        setState(() {
          elapsedTimeInSeconds = timerDuration - remainingDuration.inSeconds; // 计算经过时间
        });
        if (kDebugMode) {
          print("Time left: ${remainingDuration.inSeconds} seconds");
        }
      },
      onComplete: () {
        setState(() {
          isTimerRunning = false; // 更新计时器状态为完成
        });
        if (kDebugMode) {
          print("Timer completed!");
        }
      },
    );
  }

  // 启动计时器并更新运行状态
  void startTimer() {
    _timerController.start();
    setState(() {
      isTimerRunning = true; // 更新计时器状态为运行
    });
  }

  // 停止计时器并更新运行状态
  void stopTimer() {
    _timerController.stop();
    setState(() {
      isTimerRunning = false; // 更新计时器状态为停止
    });
  }

  // 重置计时器和经过时间
  void resetTimer() {
    stopTimer(); // 如果计时器正在运行，则停止
    setState(() {
      elapsedTimeInSeconds = 0; // 重置经过时间
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 用户输入框设置计时器持续时间
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 20.0),
              child: TextField(
                decoration: const InputDecoration(
                  labelText: 'Set Timer Duration (seconds)',
                  border: OutlineInputBorder(),
                ),
                keyboardType: TextInputType.number,
                onChanged: (value) {
                  // 验证并更新计时器持续时间
                  final int? duration = int.tryParse(value);
                  if (duration != null && duration > 0) {
                    setState(() {
                      timerDuration = duration;
                      errorMessage = null; // 清除有效输入时的错误消息
                    });
                  } else {
                    setState(() {
                      errorMessage = 'Please enter a positive number'; // 设置错误消息
                    });
                  }
                },
              ),
            ),
            if (errorMessage != null) // 如果存在错误消息则显示
              Text(
                errorMessage!,
                style: const TextStyle(color: Colors.red),
              ),
            const SizedBox(height: 20),
            // 显示计时器，设置计时器持续时间为用户定义的值
            MyTimer(
              startTimerInSeconds: 0,
              endTimerInSeconds: timerDuration, // 计时器将从用户定义的持续时间开始倒计时
              controller: _timerController,
              style: const TextStyle(fontSize: 40, fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 20),
            // 显示经过时间给用户
            Text(
              'Elapsed Time: $elapsedTimeInSeconds seconds',
              style: const TextStyle(fontSize: 20),
            ),
            const SizedBox(height: 20),
            // 启动计时器按钮
            ElevatedButton(
              onPressed: isTimerRunning ? null : startTimer,
              // 如果计时器正在运行则禁用
              style: ElevatedButton.styleFrom(
                backgroundColor: isTimerRunning ? Colors.grey : Colors.blue, // 根据状态改变颜色
              ),
              child: const Text('Start Timer'),
            ),
            const SizedBox(height: 10),
            // 停止计时器按钮
            ElevatedButton(
              onPressed: isTimerRunning ? stopTimer : null,
              // 如果计时器停止则禁用
              style: ElevatedButton.styleFrom(
                backgroundColor: isTimerRunning ? Colors.red : Colors.grey, // 根据状态改变颜色
              ),
              child: const Text('Stop Timer'),
            ),
            const SizedBox(height: 10),
            // 重置计时器按钮
            ElevatedButton(
              onPressed: resetTimer, // 总是可以重置
              child: const Text('Reset Timer'),
            ),
          ],
        ),
      ),
    );
  }
}