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

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

@ -16,168 +16,171 @@ 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( children: [
child: LayoutBuilder(builder: (context, constraints) { const _RedWaveBackground(),
return Column( SafeArea(
children: [ child: Center(
_buildHeader(), child: Column(
const SizedBox(height: 16), mainAxisSize: MainAxisSize.min,
_buildWelcomeTextsAndChips(), children: [
const SizedBox(height: 16), const SizedBox(height: 24),
Expanded( // Static Logo (not scrollable)
child: Container( ScaleTransition(
width: double.infinity, scale: _logoAnimation,
decoration: const BoxDecoration( child: Container(
color: Colors.white, width: 100,
borderRadius: height: 100,
BorderRadius.vertical(top: Radius.circular(32)), 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),
),
), ),
child: SingleChildScrollView( const SizedBox(height: 8),
padding: const EdgeInsets.symmetric( // Scrollable content below the logo
horizontal: 24, vertical: 32), Expanded(
child: ConstrainedBox( child: SingleChildScrollView(
constraints: BoxConstraints( padding: const EdgeInsets.symmetric(horizontal: 24),
minHeight: constraints.maxHeight - 120), child: ConstrainedBox(
child: Obx(() { constraints: const BoxConstraints(maxWidth: 420),
final isNewUser = controller.isNewUser.value; child: Column(
children: [
return IntrinsicHeight( const SizedBox(height: 12),
child: Column( MyText(
crossAxisAlignment: CrossAxisAlignment.center, "Welcome to Marco",
children: [ fontSize: 24,
MyText.headlineSmall( fontWeight: 800,
isNewUser ? 'Generate MPIN' : 'Enter MPIN', color: Colors.black87,
fontWeight: 700, textAlign: TextAlign.center,
color: Colors.black87, ),
), const SizedBox(height: 10),
const SizedBox(height: 8), MyText(
MyText.bodyMedium( "Streamline Project Management\nBoost Productivity with Automation.",
isNewUser fontSize: 14,
? 'Set your 6-digit MPIN for quick login.' color: Colors.black54,
: 'Enter your 6-digit MPIN to continue.', textAlign: TextAlign.center,
color: Colors.black54, ),
fontSize: 16, if (_isBetaEnvironment) ...[
textAlign: TextAlign.center, const SizedBox(height: 12),
), Container(
const SizedBox(height: 32), padding: const EdgeInsets.symmetric(
_buildMPINForm(controller, isNewUser), horizontal: 10, vertical: 4),
const SizedBox(height: 40), decoration: BoxDecoration(
_buildSubmitButton(controller, isNewUser), color: Colors.orangeAccent,
const SizedBox(height: 24), borderRadius: BorderRadius.circular(6),
_buildFooterOptions(controller, isNewUser), ),
Padding( child: MyText(
padding: 'BETA',
const EdgeInsets.symmetric(horizontal: 24), color: Colors.white,
child: Align( fontWeight: 600,
alignment: Alignment.centerLeft, fontSize: 12,
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,
),
),
), ),
), ),
], ],
), const SizedBox(height: 36),
); _buildMPINCard(controller),
}), ],
),
),
), ),
), ),
), ],
), ),
], ),
); ),
}), ],
), ),
); );
} }
Widget _buildWelcomeTextsAndChips() { Widget _buildMPINCard(MPINController controller) {
return Padding( return Obx(() {
padding: const EdgeInsets.symmetric(horizontal: 20), final isNewUser = controller.isNewUser.value;
child: Column(
children: [ return Container(
MyText.headlineSmall( padding: const EdgeInsets.all(24),
"Welcome to Marco", decoration: BoxDecoration(
fontWeight: 700, color: Colors.white,
color: Colors.white, borderRadius: BorderRadius.circular(20),
textAlign: TextAlign.center, boxShadow: const [
fontSize: 20, BoxShadow(
), color: Colors.black12,
const SizedBox(height: 4), blurRadius: 10,
MyText.bodyMedium( offset: Offset(0, 4),
"Streamline Project Management and Boost Productivity with Automation.", ),
color: Colors.white70,
fontSize: 14,
textAlign: TextAlign.center,
),
if (_isBetaEnvironment) ...[
const SizedBox(height: 8),
_buildBetaLabel(),
], ],
], ),
), child: Column(
); children: [
} MyText(
isNewUser ? 'Generate MPIN' : 'Enter MPIN',
Widget _buildBetaLabel() { fontSize: 20,
return Container( fontWeight: 700,
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4), color: Colors.black87,
decoration: BoxDecoration( textAlign: TextAlign.center,
color: Colors.orangeAccent, ),
borderRadius: BorderRadius.circular(4), const SizedBox(height: 10),
), MyText(
child: MyText.bodySmall( isNewUser
'BETA', ? 'Set your 6-digit MPIN for quick login.'
color: Colors.white, : 'Enter your 6-digit MPIN to continue.',
fontWeight: 600, fontSize: 14,
fontSize: 12, color: Colors.black54,
), textAlign: TextAlign.center,
); ),
} const SizedBox(height: 30),
_buildMPINForm(controller, isNewUser),
Widget _buildHeader() { const SizedBox(height: 32),
return Container( _buildSubmitButton(controller, isNewUser),
padding: const EdgeInsets.all(12), const SizedBox(height: 20),
margin: const EdgeInsets.symmetric(horizontal: 24), _buildFooterOptions(controller, isNewUser),
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 _buildMPINForm(MPINController controller, bool isNewUser) { Widget _buildMPINForm(MPINController controller, bool isNewUser) {
@ -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;
}