admin/marco.pms.mobileapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(mpin-auth): enhance MPINAuthScreen with logo animation and improved layout

Browse Source
This commit is contained in:
Vaibhav Surve 2025-07-09 12:43:19 +05:30
parent 91e2bb7bc8
commit efd5021ab1
1 changed files with 200 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

321
lib/view/auth/mpin_auth_screen.dart
View File

@ -16,170 +16,173 @@ class MPINAuthScreen extends StatefulWidget {
State<MPINAuthScreen> createState() => _MPINAuthScreenState(); State<MPINAuthScreen> createState() => _MPINAuthScreenState();
} }
class _MPINAuthScreenState extends State<MPINAuthScreen> with UIMixin { class _MPINAuthScreenState extends State<MPINAuthScreen>
with UIMixin, SingleTickerProviderStateMixin {
late AnimationController _controller;
late Animation<double> _logoAnimation;
bool get _isBetaEnvironment => ApiEndpoints.baseUrl.contains("stage"); bool get _isBetaEnvironment => ApiEndpoints.baseUrl.contains("stage");
@override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 800),
);
_logoAnimation = CurvedAnimation(
parent: _controller,
curve: Curves.easeOutBack,
);
_controller.forward();
}
@override @override
void dispose() { void dispose() {
Get.delete<MPINController>(); Get.delete<MPINController>();
_controller.dispose();
super.dispose(); super.dispose();
} }
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final MPINController controller = Get.put(MPINController()); final controller = Get.put(MPINController());
return Scaffold( return Scaffold(
backgroundColor: contentTheme.brandRed, body: Stack(
body: SafeArea(
child: LayoutBuilder(builder: (context, constraints) {
return Column(
children: [ children: [
_buildHeader(), const _RedWaveBackground(),
const SizedBox(height: 16), SafeArea(
_buildWelcomeTextsAndChips(), child: Center(
const SizedBox(height: 16),
Expanded(
child: Container(
width: double.infinity,
decoration: const BoxDecoration(
color: Colors.white,
borderRadius:
BorderRadius.vertical(top: Radius.circular(32)),
),
child: SingleChildScrollView(
padding: const EdgeInsets.symmetric(
horizontal: 24, vertical: 32),
child: ConstrainedBox(
constraints: BoxConstraints(
minHeight: constraints.maxHeight - 120),
child: Obx(() {
final isNewUser = controller.isNewUser.value;
return IntrinsicHeight(
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.center, mainAxisSize: MainAxisSize.min,
children: [ children: [
MyText.headlineSmall( const SizedBox(height: 24),
isNewUser ? 'Generate MPIN' : 'Enter MPIN', // Static Logo (not scrollable)
fontWeight: 700, ScaleTransition(
color: Colors.black87, scale: _logoAnimation,
child: Container(
width: 100,
height: 100,
decoration: BoxDecoration(
color: Colors.white,
shape: BoxShape.circle,
boxShadow: const [
BoxShadow(
color: Colors.black12,
blurRadius: 10,
offset: Offset(0, 4),
),
],
),
padding: const EdgeInsets.all(20),
child: Image.asset(Images.logoDark),
),
), ),
const SizedBox(height: 8), const SizedBox(height: 8),
MyText.bodyMedium( // Scrollable content below the logo
isNewUser Expanded(
? 'Set your 6-digit MPIN for quick login.' child: SingleChildScrollView(
: 'Enter your 6-digit MPIN to continue.', padding: const EdgeInsets.symmetric(horizontal: 24),
color: Colors.black54, child: ConstrainedBox(
fontSize: 16, constraints: const BoxConstraints(maxWidth: 420),
textAlign: TextAlign.center,
),
const SizedBox(height: 32),
_buildMPINForm(controller, isNewUser),
const SizedBox(height: 40),
_buildSubmitButton(controller, isNewUser),
const SizedBox(height: 24),
_buildFooterOptions(controller, isNewUser),
Padding(
padding:
const EdgeInsets.symmetric(horizontal: 24),
child: Align(
alignment: Alignment.centerLeft,
child: TextButton.icon(
onPressed: () async {
await LocalStorage.logout();
},
icon: const Icon(Icons.arrow_back,
color: Colors.white),
label: MyText.bodyMedium(
'Back to Home Page',
color: Colors.white,
fontWeight: 600,
fontSize: 14,
),
style: TextButton.styleFrom(
foregroundColor: Colors.white,
),
),
),
),
],
),
);
}),
),
),
),
),
],
);
}),
),
);
}
Widget _buildWelcomeTextsAndChips() {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 20),
child: Column( child: Column(
children: [ children: [
MyText.headlineSmall( const SizedBox(height: 12),
MyText(
"Welcome to Marco", "Welcome to Marco",
fontWeight: 700, fontSize: 24,
color: Colors.white, fontWeight: 800,
color: Colors.black87,
textAlign: TextAlign.center, textAlign: TextAlign.center,
fontSize: 20,
), ),
const SizedBox(height: 4), const SizedBox(height: 10),
MyText.bodyMedium( MyText(
"Streamline Project Management and Boost Productivity with Automation.", "Streamline Project Management\nBoost Productivity with Automation.",
color: Colors.white70,
fontSize: 14, fontSize: 14,
color: Colors.black54,
textAlign: TextAlign.center, textAlign: TextAlign.center,
), ),
if (_isBetaEnvironment) ...[ if (_isBetaEnvironment) ...[
const SizedBox(height: 8), const SizedBox(height: 12),
_buildBetaLabel(), Container(
], padding: const EdgeInsets.symmetric(
], horizontal: 10, vertical: 4),
),
);
}
Widget _buildBetaLabel() {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
decoration: BoxDecoration( decoration: BoxDecoration(
color: Colors.orangeAccent, color: Colors.orangeAccent,
borderRadius: BorderRadius.circular(4), borderRadius: BorderRadius.circular(6),
), ),
child: MyText.bodySmall( child: MyText(
'BETA', 'BETA',
color: Colors.white, color: Colors.white,
fontWeight: 600, fontWeight: 600,
fontSize: 12, fontSize: 12,
), ),
); ),
} ],
const SizedBox(height: 36),
Widget _buildHeader() { _buildMPINCard(controller),
return Container( ],
padding: const EdgeInsets.all(12), ),
margin: const EdgeInsets.symmetric(horizontal: 24), ),
decoration: BoxDecoration( ),
color: Colors.white, ),
borderRadius: BorderRadius.circular(16), ],
boxShadow: const [ ),
BoxShadow( ),
color: Colors.black12,
blurRadius: 6,
offset: Offset(0, 3),
), ),
], ],
), ),
child: Image.asset(Images.logoDark, height: 70),
); );
} }
Widget _buildMPINCard(MPINController controller) {
return Obx(() {
final isNewUser = controller.isNewUser.value;
return Container(
padding: const EdgeInsets.all(24),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(20),
boxShadow: const [
BoxShadow(
color: Colors.black12,
blurRadius: 10,
offset: Offset(0, 4),
),
],
),
child: Column(
children: [
MyText(
isNewUser ? 'Generate MPIN' : 'Enter MPIN',
fontSize: 20,
fontWeight: 700,
color: Colors.black87,
textAlign: TextAlign.center,
),
const SizedBox(height: 10),
MyText(
isNewUser
? 'Set your 6-digit MPIN for quick login.'
: 'Enter your 6-digit MPIN to continue.',
fontSize: 14,
color: Colors.black54,
textAlign: TextAlign.center,
),
const SizedBox(height: 30),
_buildMPINForm(controller, isNewUser),
const SizedBox(height: 32),
_buildSubmitButton(controller, isNewUser),
const SizedBox(height: 20),
_buildFooterOptions(controller, isNewUser),
],
),
);
});
}
Widget _buildMPINForm(MPINController controller, bool isNewUser) { Widget _buildMPINForm(MPINController controller, bool isNewUser) {
return Form( return Form(
key: controller.formKey, key: controller.formKey,
@ -187,8 +190,8 @@ class _MPINAuthScreenState extends State<MPINAuthScreen> with UIMixin {
children: [ children: [
_buildDigitRow(controller, isRetype: false), _buildDigitRow(controller, isRetype: false),
if (isNewUser) ...[ if (isNewUser) ...[
const SizedBox(height: 24), const SizedBox(height: 20),
MyText.bodyMedium( MyText(
'Retype MPIN', 'Retype MPIN',
fontWeight: 600, fontWeight: 600,
color: Colors.black.withOpacity(0.6), color: Colors.black.withOpacity(0.6),
@ -203,8 +206,10 @@ class _MPINAuthScreenState extends State<MPINAuthScreen> with UIMixin {
} }
Widget _buildDigitRow(MPINController controller, {required bool isRetype}) { Widget _buildDigitRow(MPINController controller, {required bool isRetype}) {
return Row( return Wrap(
mainAxisAlignment: MainAxisAlignment.center, alignment: WrapAlignment.center,
spacing: 0,
runSpacing: 12,
children: List.generate(6, (index) { children: List.generate(6, (index) {
return _buildDigitBox(controller, index, isRetype); return _buildDigitBox(controller, index, isRetype);
}), }),
@ -221,7 +226,7 @@ class _MPINAuthScreenState extends State<MPINAuthScreen> with UIMixin {
return Container( return Container(
margin: const EdgeInsets.symmetric(horizontal: 6), margin: const EdgeInsets.symmetric(horizontal: 6),
width: 40, width: 30,
height: 55, height: 55,
child: TextFormField( child: TextFormField(
controller: textController, controller: textController,
@ -294,10 +299,7 @@ class _MPINAuthScreenState extends State<MPINAuthScreen> with UIMixin {
children: [ children: [
if (isNewUser) if (isNewUser)
TextButton.icon( TextButton.icon(
onPressed: () async { onPressed: () => Get.toNamed('/dashboard'),
Get.delete<MPINController>();
Get.toNamed('/dashboard');
},
icon: const Icon(Icons.arrow_back, icon: const Icon(Icons.arrow_back,
size: 18, color: Colors.redAccent), size: 18, color: Colors.redAccent),
label: MyText.bodyMedium( label: MyText.bodyMedium(
@ -310,7 +312,6 @@ class _MPINAuthScreenState extends State<MPINAuthScreen> with UIMixin {
if (showBackToLogin) if (showBackToLogin)
TextButton.icon( TextButton.icon(
onPressed: () async { onPressed: () async {
Get.delete<MPINController>();
await LocalStorage.logout(); await LocalStorage.logout();
}, },
icon: const Icon(Icons.arrow_back, icon: const Icon(Icons.arrow_back,
@ -327,3 +328,53 @@ class _MPINAuthScreenState extends State<MPINAuthScreen> with UIMixin {
}); });
} }
} }
class _RedWaveBackground extends StatelessWidget {
const _RedWaveBackground();
@override
Widget build(BuildContext context) {
return CustomPaint(
painter: _WavePainter(),
size: Size.infinite,
);
}
}
class _WavePainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
final paint1 = Paint()
..shader = const LinearGradient(
colors: [Color(0xFFB71C1C), Color(0xFFD32F2F)],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
).createShader(Rect.fromLTWH(0, 0, size.width, size.height));
final path1 = Path()
..moveTo(0, size.height * 0.2)
..quadraticBezierTo(size.width * 0.25, size.height * 0.05,
size.width * 0.5, size.height * 0.15)
..quadraticBezierTo(
size.width * 0.75, size.height * 0.25, size.width, size.height * 0.1)
..lineTo(size.width, 0)
..lineTo(0, 0)
..close();
canvas.drawPath(path1, paint1);
final paint2 = Paint()..color = Colors.redAccent.withOpacity(0.15);
final path2 = Path()
..moveTo(0, size.height * 0.25)
..quadraticBezierTo(
size.width * 0.4, size.height * 0.1, size.width, size.height * 0.2)
..lineTo(size.width, 0)
..lineTo(0, 0)
..close();
canvas.drawPath(path2, paint2);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) => false;
}