An interactive 2FA screen is table stakes with the SignUp/SignIn flow these days especially if you’re building an app that requires high levels of security.

Note: If you came for the code, skip to the bottom of this post for a link to my GitHub repo.

End result of this post

In this post, I will walk you through the process of building a screen that looks like the one above. So let’s get started.

So, let’s go ahead and declare it in our pub_spec.yaml file and do a ‘flutter packages get’

Since, this is clearly a stateful widget, let’s go ahead and declare a stateful widget,

We have created a basic stateful widget that has a TextEditingController so that we can use it for a TextField for the user to type the code, a FocusNode that can be attached to the TextField, a ‘code’ string which will hold the value of the code, a ‘loaded’, ‘shake’ and ‘valid’ boolean variables for toggling the state based on whether the backend returned after validating the code, the text fields must shake(animate with a red) for invalid code and if the code is valid or not respectively.

Now, for the onChange() callback of the TextField, let’s define a method that takes the current value of the code and sets the state of the **_code _**variable to that value.

For the onClick() callback of the **_Verify _**button, let’s go ahead and define a function where we will make the backend call, **_validate2FaCode(code) _**which is asynchronous.

#flutter #2fa #ios #mobile-app-development