getOtpUiTemplate function
Implementation
String getOtpUiTemplate(
{required String className,
required String isLoading,
bool addApiCalling = false,
bool isCurved = true}) {
final String formContainerDecoration = isCurved
? '''BoxDecoration(
color: AppColors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(40.sp),
topRight: Radius.circular(40.sp),
),
boxShadow: [
BoxShadow(
color: AppColors.black.withOpacity(0.05),
blurRadius: 10,
offset: const Offset(0, -5),
),
],
)'''
: '''BoxDecoration(
color: AppColors.white,
)''';
final String formContainerWrapper = isCurved
? 'Transform.translate(\n offset: Offset(0, -30.sp),\n child: '
: '';
final String formContainerWrapperEnd = isCurved ? ')' : '';
return '''
CustomBody(
title: "",
isLoading: $isLoading,
padding: EdgeInsets.zero,
backgroundColor: AppColors.white,
child: SingleChildScrollView(
child: Column(
children: [
// Top Section (Logo)
Container(
width: 100.sw,
height: 280.sp,
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [AppColors.primary, AppColors.secondary],
),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: 110.sp,
height: 110.sp,
decoration: BoxDecoration(
color: AppColors.white.withOpacity(0.24),
shape: BoxShape.circle,
),
child: Center(
child: Container(
width: 80.sp,
height: 80.sp,
decoration: const BoxDecoration(
color: AppColors.white,
shape: BoxShape.circle,
),
child: Icon(
Icons.mark_email_read_outlined,
size: 45.sp,
color: AppColors.primary,
),
),
),
),
SizedBox(height: 20.sp),
TextWidget(
text: "Verification",
textSize: 24.sp,
fontWeight: FontWeight.bold,
color: AppColors.white,
),
TextWidget(
text: "Enter the code sent to your email",
textSize: 14.sp,
color: AppColors.white.withOpacity(0.8),
),
],
),
),
// Bottom Section (Form Sheet)
$formContainerWrapper Container(
width: 100.sw,
padding: EdgeInsets.all(30.sp),
decoration: $formContainerDecoration,
child: Column(
children: [
TextWidget(
text: "OTP Code",
textSize: 26.sp,
fontWeight: FontWeight.bold,
color: AppColors.primary,
),
SizedBox(height: 10.sp),
TextWidget(
text: "Verification code has been sent",
textSize: 15.sp,
color: AppColors.grey,
),
SizedBox(height: 30.sp),
Align(
alignment: Alignment.centerLeft,
child: TextWidget(
text: "Verification Code",
textSize: 14.sp,
fontWeight: FontWeight.w500,
color: AppColors.grey,
),
),
SizedBox(height: 10.sp),
Pinput(
length: 4,
defaultPinTheme: PinTheme(
width: 56.sp,
height: 60.sp,
textStyle: TextStyle(
fontSize: 22.sp,
color: AppColors.primary,
fontWeight: FontWeight.bold,
),
decoration: BoxDecoration(
border: Border.all(color: AppColors.grey.withOpacity(0.3)),
borderRadius: BorderRadius.circular(12.sp),
color: AppColors.grey.withOpacity(0.05),
),
),
focusedPinTheme: PinTheme(
width: 56.sp,
height: 60.sp,
textStyle: TextStyle(
fontSize: 22.sp,
color: AppColors.primary,
fontWeight: FontWeight.bold,
),
decoration: BoxDecoration(
border: Border.all(color: AppColors.primary, width: 2),
borderRadius: BorderRadius.circular(12.sp),
),
),
validator: (s) {
return s == '2222' ? null : 'Pin is incorrect';
},
pinputAutofillHints: const [AutofillHints.oneTimeCode],
onCompleted: (pin) => print(pin),
),
SizedBox(height: 40.sp),
GestureDetector(
onTap: () {
${addApiCalling ? "context.read<${className}Bloc>().add(${className}Submit());" : ""}
},
child: Container(
width: 100.sw,
height: 55.sp,
decoration: BoxDecoration(
color: AppColors.primary,
borderRadius: BorderRadius.circular(100.sp), // Pill shape
boxShadow: [
BoxShadow(
color: AppColors.primary.withOpacity(0.35),
blurRadius: 10,
offset: const Offset(0, 5),
),
],
),
child: Center(
child: TextWidget(
text: "Verify",
textSize: 18.sp,
fontWeight: FontWeight.bold,
color: AppColors.white,
),
),
),
),
SizedBox(height: 30.sp),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextWidget(
text: "Didn't receive code? ",
textSize: 14.sp,
color: AppColors.grey,
),
GestureDetector(
onTap: () {},
child: TextWidget(
text: "Resend",
textSize: 14.sp,
color: AppColors.primary,
fontWeight: FontWeight.bold,
),
),
],
),
SizedBox(height: 50.sp),
],
),
)$formContainerWrapperEnd,
],
),
),
)''';
}