Flutter OTP Screen UI Example – OTP TextField Code

Basics, Flutter Login App, Flutter UI / UX, UI UX

Flutter OTP Screen UI deign in flutter 2022 - Flutter OTP 2022 - Flutter OTP github - OTP Flutter

In this flutter UI tutorial, we will learn how to design a beautiful modern and minimal Flutter OTP Screen UI. To design this OTP screen we will use Flutter OTP TextField.

There are two mainly used Flutter OTP Packages and dependencies on pub.dev.

Among all these, we will use flutter otp text field package (first one).

We will also learn how to get single box value from OTP and also whole OTP entered by the user.

In our previous tutorials, we already learned how to design Flutter Login, Signup, Forget Password and Welcome Screen UI. So, In this tutorial, I will explain the OTP Screen UI for Signup, Forget Password including Email and Phone No.

You can watch recent playlist tutorials and all the related tutorials to this Tutorial.

Complete Course

Watch Youtube tutorial

Subscribe on Youtube

otp_screen.dart

class OTPScreen extends StatelessWidget {
  const OTPScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        padding: const EdgeInsets.all(tDefaultSize),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              tOtpTitle,
              style: GoogleFonts.montserrat(fontWeight: FontWeight.bold, fontSize: 80.0),
            ),
            Text(tOtpSubTitle.toUpperCase(), style: Theme.of(context).textTheme.headline6),
            const SizedBox(height: 40.0),
            const Text("$tOtpMessage support@codingwitht.com", textAlign: TextAlign.center),
            const SizedBox(height: 20.0),
            OtpTextField(
                mainAxisAlignment: MainAxisAlignment.center,
                numberOfFields: 6,
                fillColor: Colors.black.withOpacity(0.1),
                filled: true,
                onSubmit: (code) => print("OTP is => $code")),
            const SizedBox(height: 20.0),
            SizedBox(
              width: double.infinity,
              child: ElevatedButton(onPressed: () {}, child: const Text(tNext)),
            ),
          ],
        ),
      ),
    );
  }
}