Flutter计时步数统计插件step_timer的使用

StepTimer Package

一个用于Flutter的可定制计时步数统计小部件包，允许你创建一个具有多种功能的步数计时器，如开始、暂停、恢复、重置和完成等操作。

特性

• 支持基于步骤的计时器功能。
• 允许自定义每步的持续时间。
• 提供计时器开始、暂停、恢复、重置、滴答和完成的回调。
• 通过widgetBuilder自定义外观。

安装

在你的pubspec.yaml文件中添加以下行：

dependencies:
  step_timer: <latest-version> # 替换为最新版本

运行flutter pub get以安装该包。

使用

导入包：

import 'package:step_timer/step_timer.dart';

在你的Flutter应用中使用StepTimerIndicator小部件，并提供必要的参数：

StepTimerIndicator get _getStepTimer {
  return StepTimerIndicator(
    key: const Key("timer_page"),
    targetDuration: const Duration(seconds: 60),
    stepCount: 60,
    onInitialization: (controller) {
      // 获取并设置计时器控制器
      setState(() {
        _controller = controller;
      });
    },
    stepChangeDurationInSeconds: 1,
    widgetBuilder: (int currentStep, Duration elapsedTime) {
      return Center(
        child: Text(
          elapsedTime.inSeconds.toString(),
          key: const ValueKey("timerValue"),
        ),
      );
    },
    onPause: (Duration timeValue) {
      print("Onpause triggered ${timeValue.inSeconds}");
      setState(() {
        isPause = true;
      });
    },
    onFinish: () {
      print("Onfinish triggered");
      isRunning = false;
      isPause = false;
      setState(() {});
    },
    onTick: (Duration timeValue) {
      print("Ontick triggered ${timeValue.inSeconds}");
    },
    onReset: () {
      print("Onreset triggered");
      isRunning = false;
      isPause = false;
      setState(() {});
    },
    onResume: (Duration timerValue) {
      print("Onresume triggered ${timerValue.inSeconds}");
      setState(() {
        isPause = false;
      });
    },
    onStart: () {
      print("Onstart triggered");
      setState(() {
        isRunning = true;
        isPause = false;
      });
    },
  );
}

参数

• onInitialization（必需）：初始化时提供计时器控制器的回调函数。
• targetDuration（默认60秒）：计时器的总持续时间。
• stepCount（默认60）：计时器中的步骤数量。
• stepWidth（可选）：每个步骤指示器的宽度。
• progressColor（可选）：已完成步骤的颜色。
• space（可选）：中心与步骤线之间的间距。
• height（可选）：StepTimerIndicator小部件的高度。
• width（可选）：StepTimerIndicator小部件的宽度。
• initialStep（可选）：从哪个初始步骤开始（0到stepCount-1）。
• inProgressColor（可选）：未完成步骤的颜色。
• indicatorColor（可选）：当前步骤三角形指示器的颜色。
• indicatorGap（可选）：步骤线和三角形指示器之间的间隙。
• indicatorSize（必需）：三角形指示器的大小。
• stepChangeDurationInSeconds（默认1秒）：每步的持续时间。
• widgetBuilder（可选）：构建每个步骤的计时器小部件的函数。
• onPause（可选）：计时器暂停时触发的回调函数。
• onFinish（可选）：计时器完成后触发的回调函数。
• onTick（可选）：每次滴答时触发的回调函数。
• onReset（可选）：计时器重置时触发的回调函数。
• onResume（可选）：计时器恢复时触发的回调函数。
• onStart（可选）：计时器开始时触发的回调函数。

许可证

该项目遵循MIT许可证。详情请参阅MIT许可证。

问题和反馈

请在GitHub仓库提交问题或提供反馈。

示例代码

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Step Timer Example',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      darkTheme: ThemeData.dark().copyWith(
        primaryColor: Colors.orange,
        scaffoldBackgroundColor: Colors.black,
        floatingActionButtonTheme: const FloatingActionButtonThemeData(
          backgroundColor: Colors.orange,
        ),
      ),
      themeMode: ThemeMode.dark,
      home: const TimerPage(),
    );
  }
}