Implementation
String getLoginUiTemplate(
{required String className,
required String isLoading,
bool addApiCalling = false,
List<Map<String, String>> fields = const [],
bool isCurved = true}) {
final String fieldsWidget;
if (fields.isNotEmpty) {
fieldsWidget = fields.map((field) {
final name = field['name'] ?? 'Field';
final isPassword = name.toLowerCase().contains('password');
// Select appropriate icon as string
String icon = "Icons.edit_outlined";
final n = name.toLowerCase();
if (n.contains('email')) icon = "Icons.alternate_email";
else if (n.contains('pass')) icon = "Icons.lock_outline";
else if (n.contains('phone')) icon = "Icons.phone_android_outlined";
else if (n.contains('name')) icon = "Icons.person_outline";
else if (n.contains('otp') || n.contains('code')) icon = "Icons.pin_outlined";
return '''
Align(
alignment: Alignment.centerLeft,
child: TextWidget(
text: "$name",
textSize: 14.sp,
fontWeight: FontWeight.w500,
color: AppColors.grey,
),
),
SizedBox(height: 8.sp),
CommonTextFormField(
hintText: "Enter your $n",
isPassword: $isPassword,
prefixWidget: Icon($icon, size: 20.sp, color: AppColors.primary),
),
SizedBox(height: 20.sp),''';
}).join('\n');
} else {
fieldsWidget = '''
Align(
alignment: Alignment.centerLeft,
child: TextWidget(
text: "Email Address",
textSize: 14.sp,
fontWeight: FontWeight.w500,
color: AppColors.grey,
),
),
SizedBox(height: 8.sp),
CommonTextFormField(
hintText: "Enter your email",
prefixWidget: Icon(Icons.alternate_email, size: 20.sp, color: AppColors.primary),
),
SizedBox(height: 25.sp),
Align(
alignment: Alignment.centerLeft,
child: TextWidget(
text: "Password",
textSize: 14.sp,
fontWeight: FontWeight.w500,
color: AppColors.grey,
),
),
SizedBox(height: 8.sp),
CommonTextFormField(
hintText: "Enter your password",
isPassword: true,
prefixWidget: Icon(Icons.lock_outline, size: 20.sp, color: AppColors.primary),
),''';
}
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.security_outlined,
size: 45.sp,
color: AppColors.primary,
),
),
),
),
SizedBox(height: 20.sp),
TextWidget(
text: "Enterprise App",
textSize: 24.sp,
fontWeight: FontWeight.bold,
color: AppColors.white,
),
TextWidget(
text: "Secure & Professional Access",
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: "Sign In",
textSize: 26.sp,
fontWeight: FontWeight.bold,
color: AppColors.primary,
),
SizedBox(height: 40.sp),
$fieldsWidget
SizedBox(height: 15.sp),
Align(
alignment: Alignment.centerRight,
child: TextButton(
onPressed: () {},
child: TextWidget(
text: "Recovery Password?",
color: AppColors.primary,
fontWeight: FontWeight.w600,
textSize: 14.sp,
),
),
),
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: "Log In",
textSize: 18.sp,
fontWeight: FontWeight.bold,
color: AppColors.white,
),
),
),
),
SizedBox(height: 40.sp),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextWidget(
text: "New here? ",
textSize: 14.sp,
color: AppColors.grey,
),
GestureDetector(
onTap: () {},
child: TextWidget(
text: "Create Account",
textSize: 14.sp,
color: AppColors.primary,
fontWeight: FontWeight.bold,
),
),
],
),
SizedBox(height: 50.sp),
],
),
)$formContainerWrapperEnd,
],
),
),
)''';
}
