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

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

特性

  • 简单计时器
  • 自定义颜色与字体
  • 处理事件
  • 响应式布局
  • 背景模式
  • 多主题支持

示例

开始使用

要使用这个小部件，你不需要任何特殊的要求。如果你已经安装了Flutter，你可以直接开始使用。

如何使用

步骤 1:

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

dependencies:
  flutter_timer: ^0.0.2

然后在你的 Dart 文件中导入它：

import 'package:flutter_timer/flutter_timer_widget.dart';
步骤 2:

在你的 Flutter 应用程序中使用 FlutterTimer 小部件。下面是一个完整的示例：

import 'package:flutter/material.dart';
import 'package:flutter_timer/flutter_timer_widget.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('计时器示例')),
        body: Center(
          child: FlutterTimer(
            duration: const Duration(days: 2), // 设置计时器的总时间
            onFinished: () {
              // 计时器结束时的回调函数
              print("计时器结束");
            },
            timerController: TimerController(
              elevation: 4, // 设置阴影高度
              margin: const EdgeInsets.all(4.0), // 设置边距
              padding: const EdgeInsets.all(8.0), // 设置内边距
              background: Colors.orange, // 设置背景颜色
              timerStyle: TimerStyle.Rectanular, // 设置计时器样式
              timerTextStyle: const TextStyle(color: Colors.white, fontSize: 30), // 设置计时器文本样式
              subTitleTextStyle: const TextStyle(color: Colors.white, fontSize: 12), // 设置副标题文本样式
            ),
          ),
        ),
      ),
    );
  }
}

更多关于Flutter计时器功能插件flutter_timer_widget的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter计时器功能插件flutter_timer_widget的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用flutter_timer_widget插件来实现计时器功能的代码示例。这个插件可以帮助你快速实现一个计时器界面。

首先，确保你已经在pubspec.yaml文件中添加了flutter_timer_widget的依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_timer_widget: ^x.y.z  # 请将x.y.z替换为最新的版本号

然后运行flutter pub get来安装依赖。

接下来，我们创建一个简单的Flutter应用，展示如何使用flutter_timer_widget。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Timer Widget Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: TimerScreen(),
    );
  }
}

class TimerScreen extends StatefulWidget {
  @override
  _TimerScreenState createState() => _TimerScreenState();
}

class _TimerScreenState extends State<TimerScreen> {
  int _initialTime = 60; // 初始时间，单位为秒
  TimerController _timerController;

  @override
  void initState() {
    super.initState();
    _timerController = TimerController(
      initialTime: _initialTime,
      onFinish: () {
        print("计时结束!");
        // 可以在这里添加计时结束后的处理逻辑
      },
    );
  }

  @override
  void dispose() {
    _timerController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Timer Widget Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            SizedBox(
              height: 100,
              child: TimerWidget(
                controller: _timerController,
                builder: (context, time) {
                  Duration duration = Duration(seconds: time);
                  String formattedTime =
                      '${duration.inMinutes.toString().padLeft(2, '0')}:${(duration.inSeconds % 60).toString().padLeft(2, '0')}';
                  return Text(
                    formattedTime,
                    style: TextStyle(fontSize: 48),
                  );
                },
              ),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                if (_timerController.isRunning) {
                  _timerController.pause();
                } else {
                  _timerController.resume();
                }
              },
              child: Text(_timerController.isRunning ? '暂停' : '开始'),
            ),
            ElevatedButton(
              onPressed: () {
                _timerController.reset();
              },
              child: Text('重置'),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的计时器应用：

  1. TimerController：用于控制计时器的状态，如开始、暂停和重置。
  2. TimerWidget：用于显示计时器的当前时间。
  3. builder：一个回调函数，用于自定义时间的显示格式。
  4. 按钮：用于控制计时器的开始/暂停和重置。

这个示例展示了如何使用flutter_timer_widget插件来快速实现一个基本的计时器功能。你可以根据需求进一步自定义和扩展这个示例。

回到顶部