Flutter倒计时按钮插件timer_button_fork的使用

简介

Timer Button for Flutter 是一个Flutter包，提供了一个交互式的、自禁用按钮，该按钮在指定的超时时间后重新启用。在4.0.0版本中，我们引入了 TimerButton.builder 以提供更多自定义选项。

开始使用

1. 添加依赖

打开项目的 pubspec.yaml 文件，添加 timer_button_fork 依赖，并将 [version] 替换为最新版本：

dependencies:
  flutter:
    sdk: flutter
  timer_button_fork: ^[version]

2. 安装依赖

运行以下命令来安装依赖：

flutter pub get

3. 导入包

在Dart文件中导入 timer_button_fork 包：

import 'package:timer_button_fork/timer_button_fork.dart';

使用方法

按钮类型

可以选择三种类型的按钮：

• ElevatedButton: buttonType: ButtonType.ElevatedButton
• TextButton: buttonType: ButtonType.TextButton
• OutlinedButton: buttonType: ButtonType.OutlinedButton

基本属性

• 标签文本: label: "Try Again"
• 超时时间（秒）: timeOutInSeconds: 20
• 按钮颜色: color: Colors.deepPurple
• 禁用时的颜色: disabledColor: Colors.red
• 禁用时的文本样式: disabledTextStyle: TextStyle(fontSize: 20.0)
• 启用时的文本样式: activeTextStyle: TextStyle(fontSize: 20.0, color: Colors.white)

高级自定义

可以使用 TimerButton.builder 来自定义按钮在超时期间的外观和行为。

示例代码

传统用法

TimerButton(
  label: "Send OTP Again",
  timeOutInSeconds: 20,
  onPressed: () {},
  disabledColor: Colors.red,
  color: Colors.deepPurple,
  disabledTextStyle: TextStyle(fontSize: 20.0),
  activeTextStyle: TextStyle(fontSize: 20.0, color: Colors.white),
)

使用 TimerButton.builder

TimerButton.builder(
  timeOutInSeconds: 20,
  timeBuilder: (BuildContext context, int seconds) {
    return Text("$seconds seconds");
  },
  onPressed: () {
    print('Button Pressed!');
  },
)

完整示例Demo

以下是一个完整的示例应用，展示了如何使用 timer_button_fork 插件创建不同类型的倒计时按钮。

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Timer Button Fork Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  MyHomePageState createState() {
    return MyHomePageState();
  }
}

class MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Timer Button Demo'),
      ),
      body: Material(
        child: Center(
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                // ElevatedButton 类型的倒计时按钮
                TimerButton(
                  label: "Elevated: Try Again",
                  timeOutInSeconds: 5,
                  onPressed: () {},
                  buttonType: ButtonType.ElevatedButton,
                  color: Colors.green,
                ),
                
                // OutlinedButton 类型的倒计时按钮
                TimerButton(
                  label: "Outlined: Try Again",
                  timeOutInSeconds: 5,
                  onPressed: () {},
                  buttonType: ButtonType.OutlinedButton,
                  disabledColor: Colors.deepOrange,
                  color: Colors.green,
                  activeTextStyle: TextStyle(color: Colors.yellow),
                  disabledTextStyle: TextStyle(color: Colors.pink),
                ),
                
                // TextButton 类型的倒计时按钮
                TimerButton(
                  label: "Text: Try Again",
                  timeOutInSeconds: 5,
                  onPressed: () {
                    print("Time for some action!");
                  },
                  buttonType: ButtonType.TextButton,
                  disabledColor: Colors.deepOrange,
                  color: Colors.green,
                ),
                
                // 使用 TimerButton.builder 自定义倒计时按钮
                TimerButton.builder(
                  onPressed: () {
                    print("Hey, a custom button is clicked!");
                  },
                  timeOutInSeconds: 5,
                  timeBuilder: (BuildContext context, int sec) {
                    return Container(
                      padding: EdgeInsets.all(10.0),
                      color: sec > 0 ? Colors.red : Colors.green,
                      child: Text(
                        sec > 0 ? "Custom Wait for $sec seconds" : "Click Me",
                        style: TextStyle(color: Colors.white),
                      ),
                    );
                  },
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}