Flutter OTP Screen Tutorial for beginners

Flutter OTP :

Flutter otp screen design is explained in this blog with a real-time example.We use OTP to verify the user authentication at the time of user registration or login.

Even at the time of payments we usually deal with these OTP’s to make sure payment is made securely.

Now a days most of the organizations are using OTP’s to provide there services through these OTP like aadhar verification and also for downloading the aadhar card.

Food delivery apps, online money transaction apps and many other apps use these OTP to verify the user login credentials and verify them properly before making their services available for them.

OTP’s are also used as a part of promotions as they are easily reached to every one so company’s send their product related information through these OTP’s.

Also in elections politicians promote their candidature using these OTP’s with these services they can easily reach group of people at once rather than individual visit.

Flutter otp video tutorial :

Go through the below tutorial for more detailed implementation

Dependencies :

We are adding a dependency to make the work easy, add pin_entry_text_field to your pubspec also check the latest version of the plugin to avoid any code level issues.

dependencies:
  flutter:
    sdk: flutter
  pin_entry_text_field: 0.1.4

main.dart :

Initialize with void main() and extend the class MyApp() with a StatelessWidget

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

We are returning a material app inside which we are specifying home

MaterialApp(
  home: Home(),
);

We are specifying the PinEntryTextField here we are utilizing the parameters

showFieldAsBox : true (we are displaying a box around the field.)

onSubmit : Here we are considering the final input of the pin and making the submit call and displaying a alert-box.

PinEntryTextField(
  showFieldAsBox: true,
  onSubmit: (String pin){
    showDialog(
        context: context,
        builder: (context){
          return AlertDialog(
            title: Text("Pin"),
            content: Text('Pin entered is $pin'),
          );
        }
    ); //end showDialog()
  }, // end onSubmit
), //

We are specifying the OTP block in center of the screen by providing necessary padding on all sides.

Center(
  child: Container(
    child: Padding(
      padding: const EdgeInsets.all(8.0),
      child: , // end PinEntryTextField()
    ), // end Padding()
  ),
),

Flutter Otp Full Code :

Here is the full code provided for integrating the OTP screen in your flutter app.

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Enter OTP Screen"),
      ),
      body: Center(
        child: Container(
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: PinEntryTextField(
              showFieldAsBox: true,
              onSubmit: (String pin){
                showDialog(
                    context: context,
                    builder: (context){
                      return AlertDialog(
                        title: Text("Pin"),
                        content: Text('Pin entered is $pin'),
                      );
                    }
                ); //end showDialog()
              }, // end onSubmit
            ), // end PinEntryTextField()
          ), // end Padding()
        ),
      ),
    );
  }
}

Flutter otp output :

This screen depicts the usage of the flutter otp implementation.