otp_timer_button

otp_timer_button

This is a Flutter package for easy implementation otp timer button.

Installation

Add the following to your pubspec.yaml file:

dependencies:
    otp_timer_button: ^1.1.1

Usage

Import

import 'package:otp_timer_button/otp_timer_button.dart';

Simple Example

OtpTimerButtonController controller = OtpTimerButtonController();

@override
Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: OtpTimerButton(
          controller: controller,
          onPressed: () {},
          text: Text('Resend OTP'),
          duration: 60,
        ),
      ),
    );
}

Controller

If you want to wait for the response to the OTP request, you can use the controller:

NOTE: if use controller, auto start timer is disabled on pressed button.

  OtpTimerButtonController controller = OtpTimerButtonController();

  _requestOtp() {
    controller.loading();
    Future.delayed(Duration(seconds: 2), () {
      controller.startTimer();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: OtpTimerButton(
          controller: controller,
          onPressed: () => _requestOtp(),
          text: Text('Resend OTP'),
          duration: 2,
        ),
      ),
    );
  }

controller.startTimer();
controller.loading();
controller.enableButton();

All options

OtpTimerButton(
  controller: controller,
  height: 60,
  text: Text(
    'Resend OTP',
  ),
  duration: 60,
  radius: 30,
  backgroundColor: Colors.blue,
  textColor: Colors.white,
  buttonType: ButtonType.text_button, // or ButtonType.outlined_button
  loadingIndicator: CircularProgressIndicator(
    strokeWidth: 2,
    color: Colors.red,
  ),
  loadingIndicatorColor: Colors.red,
  onPressed: () {},
),