Timer in Flutter

Mobile or Email validation plays a major role in getting genuine users into the system. Without validation, we may not get the correct information about the users which affects the quality of genuine users in our project. Thus, here we are going to design a beautiful UI or Verify Otp Screen.

Including getting validated genuine information, it is also important to control the number of times our mobile application request a response from our server. When the system gets bigger and the user numbers get bigger, the communication between mobile applications and server also gets bigger.

Hence controlling the number of servers hit by users' mobile application to the server we take a small important step in our application i.e limiting the users to request OTP response in a certain period of time.

It may not seem so important in the starting phase of the products but it also plays a major role in limiting the server request.

The output of our application looks as follows:

Working app Demonstration

Before coding, first, let's discuss the package we are going to use for beautiful UI and animation for our OTP fields.

In this project, we are going to use pin_code_fields. You can also customize this package as per your need.

All right Lets Deep Dive inside .

First, let’s add this package to pubsec.yaml file.

pin_code_fields: ^7.4.0

After that let’s define our theme color, and error color that we are going to utilize in our app. It is not mandatory to make a separate file to keep our colors or other constants values such as texts or strings or styles and decorations. But when our projects get bigger our code length in a class of files gets bigger which makes our work slower and untidy.

So, it is better to make our separate files or class for the things that are similar to keep our code tidy, clean, and understandable.

Create the file named my_theme.dart. As mentioned above here we are going to include the colors and themes going to be used in this project.

We first create a class that converts our Hex colors to MaterialColor.

class HexColor extends Color {  
static int _getColorFromHex(String hexColor) {
    hexColor = hexColor.toUpperCase().replaceAll("#", "");
    if (hexColor.length == 6) {
      hexColor = "FF$hexColor";
    }
    return int.parse(hexColor, radix: 16);  
}   
HexColor(final String hexColor) : super(_getColorFromHex(hexColor));
}

And then we declare our Colors as

static Color themeColor = HexColor('#2F3131');

The my_theme.dart will be as follows:

my_theme.dart

We then create a button that works as a reusable widget.

Create a custom_button.dart file inside the lib folder.

After creating our utils and widgets. We now create our Otp Screen.

Create the otp_screen.dart inside the lib folder.

In this screen, we create a method that gets executed when we click the Resend button.

void startTimer() {
    const oneSec = Duration(seconds: 1);
    _timer = Timer.periodic(
      oneSec,
      (Timer timer) 
{        if (_start == 0) {
          setState(() {
            timer.cancel();
            isLoading = false;
          });
        } else {
          setState(() {
            _start--; 
         });
        } 
     },
    );
  }

When our screen loads we first call the function.

@override
  void initState() {
    super.initState();
    errorController = StreamController<ErrorAnimationType>();          startTimer();
  }

We dispose of our timer as follows:

@override
  void dispose() {
    super.dispose();
    _timer.cancel();
    errorController!.close();
  }

Final otp_screen.dart looks as follows:

Finally our main.dart

Let’s get connected

We can be friends. Find on Facebook, Linkedin, Github, Youtube, BuyMeACoffee, and Instagram.

Visit: Flutter Junction

Contribute: BuyMeACoffee

Conclusion

I hope this article is helpful to you and you learned new things. I have used various things in this article that might be new for some of you.

If you learned something new or want to suggest something then please let me know in the comment.

If you loved the article click on the 👏 icon which provides motivation on delivering to you all the new things.

Also, follow to get updated on exciting articles and projects.

Learning by sharing gives a great impact on the learning process and making the community bigger and bigger.

Sharing is a magnet that attracts other enthusiasts toward you.

Hence, let's take a small step toward making our learning community bigger.

Share this article with your friends or tweet about this article if you loved it.

Get full at:

GitHub - nbnD/resend_otp_timer