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();
}
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");
@override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 800),
);
_logoAnimation = CurvedAnimation(
parent: _controller,
curve: Curves.easeOutBack,
);
_controller.forward();
}
@override
void dispose() {
Get.delete<MPINController>();
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
final MPINController controller = Get.put(MPINController());
final controller = Get.put(MPINController());
return Scaffold(
backgroundColor: contentTheme.brandRed,
body: SafeArea(
child: LayoutBuilder(builder: (context, constraints) {
return Column(
children: [
_buildHeader(),
const SizedBox(height: 16),
_buildWelcomeTextsAndChips(),
const SizedBox(height: 16),
Expanded(
child: Container(
width: double.infinity,
decoration: const BoxDecoration(
color: Colors.white,
borderRadius:
BorderRadius.vertical(top: Radius.circular(32)),
body: Stack(
children: [
const _RedWaveBackground(),
SafeArea(
child: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
const SizedBox(height: 24),
// Static Logo (not scrollable)
ScaleTransition(
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),
),
),
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(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
MyText.headlineSmall(
isNewUser ? 'Generate MPIN' : 'Enter MPIN',
fontWeight: 700,
color: Colors.black87,
),
const SizedBox(height: 8),
MyText.bodyMedium(
isNewUser
? 'Set your 6-digit MPIN for quick login.'
: 'Enter your 6-digit MPIN to continue.',
color: Colors.black54,
fontSize: 16,
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,
),
),
const SizedBox(height: 8),
// Scrollable content below the logo
Expanded(
child: SingleChildScrollView(
padding: const EdgeInsets.symmetric(horizontal: 24),
child: ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 420),
child: Column(
children: [
const SizedBox(height: 12),
MyText(
"Welcome to Marco",
fontSize: 24,
fontWeight: 800,
color: Colors.black87,
textAlign: TextAlign.center,
),
const SizedBox(height: 10),
MyText(
"Streamline Project Management\nBoost Productivity with Automation.",
fontSize: 14,
color: Colors.black54,
textAlign: TextAlign.center,
),
if (_isBetaEnvironment) ...[
const SizedBox(height: 12),
Container(
padding: const EdgeInsets.symmetric(
horizontal: 10, vertical: 4),
decoration: BoxDecoration(
color: Colors.orangeAccent,
borderRadius: BorderRadius.circular(6),
),
child: MyText(
'BETA',
color: Colors.white,
fontWeight: 600,
fontSize: 12,
),
),
],
),
);
}),
const SizedBox(height: 36),
_buildMPINCard(controller),
],
),
),
),
),
),
],
),
],
);
}),
),
),
],
),
);
}
Widget _buildWelcomeTextsAndChips() {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 20),
child: Column(
children: [
MyText.headlineSmall(
"Welcome to Marco",
fontWeight: 700,
color: Colors.white,
textAlign: TextAlign.center,
fontSize: 20,
),
const SizedBox(height: 4),
MyText.bodyMedium(
"Streamline Project Management and Boost Productivity with Automation.",
color: Colors.white70,
fontSize: 14,
textAlign: TextAlign.center,
),
if (_isBetaEnvironment) ...[
const SizedBox(height: 8),
_buildBetaLabel(),
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),
),
],
],
),
);
}
Widget _buildBetaLabel() {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
decoration: BoxDecoration(
color: Colors.orangeAccent,
borderRadius: BorderRadius.circular(4),
),
child: MyText.bodySmall(
'BETA',
color: Colors.white,
fontWeight: 600,
fontSize: 12,
),
);
}
Widget _buildHeader() {
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),
);
),
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) {
@ -187,8 +190,8 @@ class _MPINAuthScreenState extends State<MPINAuthScreen> with UIMixin {
children: [
_buildDigitRow(controller, isRetype: false),
if (isNewUser) ...[
const SizedBox(height: 24),
MyText.bodyMedium(
const SizedBox(height: 20),
MyText(
'Retype MPIN',
fontWeight: 600,
color: Colors.black.withOpacity(0.6),
@ -203,8 +206,10 @@ class _MPINAuthScreenState extends State<MPINAuthScreen> with UIMixin {
}
Widget _buildDigitRow(MPINController controller, {required bool isRetype}) {
return Row(
mainAxisAlignment: MainAxisAlignment.center,
return Wrap(
alignment: WrapAlignment.center,
spacing: 0,
runSpacing: 12,
children: List.generate(6, (index) {
return _buildDigitBox(controller, index, isRetype);
}),
@ -221,7 +226,7 @@ class _MPINAuthScreenState extends State<MPINAuthScreen> with UIMixin {
return Container(
margin: const EdgeInsets.symmetric(horizontal: 6),
width: 40,
width: 30,
height: 55,
child: TextFormField(
controller: textController,
@ -294,10 +299,7 @@ class _MPINAuthScreenState extends State<MPINAuthScreen> with UIMixin {
children: [
if (isNewUser)
TextButton.icon(
onPressed: () async {
Get.delete<MPINController>();
Get.toNamed('/dashboard');
},
onPressed: () => Get.toNamed('/dashboard'),
icon: const Icon(Icons.arrow_back,
size: 18, color: Colors.redAccent),
label: MyText.bodyMedium(
@ -310,7 +312,6 @@ class _MPINAuthScreenState extends State<MPINAuthScreen> with UIMixin {
if (showBackToLogin)
TextButton.icon(
onPressed: () async {
Get.delete<MPINController>();
await LocalStorage.logout();
},
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;
}