otp_screen

Description:

otp screen

otp_screen #
A new Flutter package for both android & iOS which helps developer in creating Otp screen with few lines of code.



Show some ❤️ and star the repo to support the project #
Screenshots #


Usage #
Example
To use this package:

add the dependency to your pubspec.yaml file.

dependencies:
flutter:
sdk: flutter
otp_screen: <latest-version>
copied to clipboard
How to use #

// logic to validate otp return [null] when success else error [String]
Future<String> validateOtp(String otp) async {
await Future.delayed(Duration(milliseconds: 2000));
if (otp == "1234") {
return null;
} else {
return "The entered Otp is wrong";
}
}

// action to be performed after OTP validation is success
void moveToNextScreen(context) {
Navigator.push(context, MaterialPageRoute(
builder: (context) => SuccessfulOtpScreen()));
}

@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
// initialize the OTP screen by passing validation logic and route callback
home: OtpScreen(
otpLength: 4,
validateOtp: validateOtp,
routeCallback: moveToNextScreen,
titleColor: Colors.black,
themeColor: Colors.black,
),
);
}
}

copied to clipboard
The above code opens the simple OTP screen


Customize Options #
You can play with different colors and add gradients as background to the screen
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: OtpScreen.withGradientBackground(
topColor: Color(0xFFcc2b5e),
bottomColor: Color(0xFF753a88),
otpLength: 4,
validateOtp: validateOtp,
routeCallback: moveToNextScreen,
themeColor: Colors.white,
titleColor: Colors.white,
title: "Phone Number Verification",
subTitle: "Enter the code sent to \n +919876543210",
icon: Image.asset(
'images/phone_logo.png',
fit: BoxFit.fill,
),
),
copied to clipboard
The output of the above code will open below screen.

Created & Maintained By #
[Lokesh Chennamchetty] (https://github.com/lokesh-sudhakar) (LinkedIn)