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

feat(login): enhance WelcomeScreen with animation and improved dialog layout

Browse Source
This commit is contained in:
Vaibhav Surve 2025-07-09 12:27:58 +05:30
parent f4135a77d8
commit 91e2bb7bc8
1 changed files with 240 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

359
lib/view/auth/login_option_screen.dart
View File

@ -16,143 +16,199 @@ class LoginOptionScreen extends StatelessWidget {
Widget build(BuildContext context) => const WelcomeScreen(); Widget build(BuildContext context) => const WelcomeScreen();
} }
class WelcomeScreen extends StatelessWidget { class WelcomeScreen extends StatefulWidget {
const WelcomeScreen({super.key}); const WelcomeScreen({super.key});
@override
State<WelcomeScreen> createState() => _WelcomeScreenState();
}
class _WelcomeScreenState extends State<WelcomeScreen>
with 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
void dispose() {
_controller.dispose();
super.dispose();
}
void _showLoginDialog(BuildContext context, LoginOption option) { void _showLoginDialog(BuildContext context, LoginOption option) {
showDialog( showDialog(
context: context, context: context,
builder: (_) => Dialog( barrierDismissible: false, // Prevent dismiss on outside tap
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)), builder: (_) => Dialog(
insetPadding: const EdgeInsets.all(24), shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
child: SingleChildScrollView( insetPadding: const EdgeInsets.all(24),
child: Padding( child: SingleChildScrollView(
padding: const EdgeInsets.all(24), child: Padding(
child: ConstrainedBox( padding: const EdgeInsets.all(24),
constraints: const BoxConstraints(maxWidth: 420), child: ConstrainedBox(
child: Column( constraints: const BoxConstraints(maxWidth: 420),
mainAxisSize: MainAxisSize.min, child: Column(
children: [ mainAxisSize: MainAxisSize.min,
MyText( children: [
option == LoginOption.email ? "Login with Email" : "Login with OTP", // Row with title and close button
fontSize: 20, Row(
fontWeight: 700, children: [
), Expanded(
const SizedBox(height: 20), child: MyText(
option == LoginOption.email option == LoginOption.email
? EmailLoginForm() ? "Login with Email"
: const OTPLoginScreen(), : "Login with OTP",
], fontSize: 20,
), fontWeight: 700,
),
),
IconButton(
icon: const Icon(Icons.close),
onPressed: () => Navigator.of(context).pop(),
),
],
),
const SizedBox(height: 20),
option == LoginOption.email
? EmailLoginForm()
: const OTPLoginScreen(),
],
), ),
), ),
), ),
), ),
); ),
} );
}
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final screenWidth = MediaQuery.of(context).size.width; final screenWidth = MediaQuery.of(context).size.width;
return Scaffold( return Scaffold(
backgroundColor: const Color(0xFFB71C1C), body: Stack(
body: SafeArea( children: [
child: Center( const _RedWaveBackground(),
child: SingleChildScrollView( SafeArea(
padding: const EdgeInsets.all(24), child: Center(
child: ConstrainedBox( child: SingleChildScrollView(
constraints: BoxConstraints( padding: const EdgeInsets.all(24),
maxWidth: screenWidth < 500 ? double.infinity : 420, child: ConstrainedBox(
), constraints: BoxConstraints(
child: Column( maxWidth: screenWidth < 500 ? double.infinity : 420,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
// Logo
Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(20),
boxShadow: const [
BoxShadow(color: Colors.black26, blurRadius: 8),
],
),
child: Image.asset(Images.logoDark, height: 60),
), ),
child: Column(
const SizedBox(height: 24), crossAxisAlignment: CrossAxisAlignment.center,
children: [
// Welcome Text // Logo with circular background
MyText( ScaleTransition(
"Welcome to Marco", scale: _logoAnimation,
fontSize: 24, child: Container(
fontWeight: 800, width: 100,
color: Colors.white, height: 100,
textAlign: TextAlign.center, decoration: BoxDecoration(
), color: Colors.white,
const SizedBox(height: 10), shape: BoxShape.circle,
MyText( boxShadow: [
"Streamline Project Management\nBoost Productivity with Automation.", BoxShadow(
fontSize: 14, color: Colors.black12,
color: Colors.white70, blurRadius: 10,
textAlign: TextAlign.center, offset: Offset(0, 4),
), ),
],
if (_isBetaEnvironment) ...[ ),
const SizedBox(height: 12), padding: const EdgeInsets.all(20),
Container( child: Image.asset(Images.logoDark),
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4), ),
decoration: BoxDecoration(
color: Colors.orangeAccent,
borderRadius: BorderRadius.circular(6),
), ),
child: MyText(
'BETA', const SizedBox(height: 24),
color: Colors.white,
fontWeight: 600, // Welcome Text
MyText(
"Welcome to Marco",
fontSize: 26,
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),
_buildActionButton(
context,
label: "Login with Username",
icon: LucideIcons.mail,
option: LoginOption.email,
),
const SizedBox(height: 16),
_buildActionButton(
context,
label: "Login with OTP",
icon: LucideIcons.message_square,
option: LoginOption.otp,
),
const SizedBox(height: 16),
_buildActionButton(
context,
label: "Request a Demo",
icon: LucideIcons.phone_call,
option: null,
),
const SizedBox(height: 36),
MyText(
'App version 1.0.0',
color: Colors.grey,
fontSize: 12, fontSize: 12,
), ),
), ],
],
const SizedBox(height: 36),
// Login Buttons
_buildActionButton(
context,
label: "Login with Username",
icon: LucideIcons.mail,
option: LoginOption.email,
), ),
const SizedBox(height: 16), ),
_buildActionButton(
context,
label: "Login with OTP",
icon: LucideIcons.message_square,
option: LoginOption.otp,
),
const SizedBox(height: 16),
_buildActionButton(
context,
label: "Request a Demo",
icon: LucideIcons.phone_call,
option: null,
),
const SizedBox(height: 36),
// Version Info
MyText(
'App version 1.0.0',
color: Colors.white60,
fontSize: 12,
),
],
), ),
), ),
), ),
), ],
), ),
); );
} }
@ -161,14 +217,14 @@ class WelcomeScreen extends StatelessWidget {
BuildContext context, { BuildContext context, {
required String label, required String label,
required IconData icon, required IconData icon,
LoginOption? option, // nullable for "Request a Demo" LoginOption? option,
}) { }) {
return SizedBox( return SizedBox(
width: double.infinity, width: double.infinity,
child: ElevatedButton.icon( child: ElevatedButton.icon(
icon: Icon(icon, size: 20, color: Colors.white), icon: Icon(icon, size: 20, color: Colors.white),
label: Padding( label: Padding(
padding: const EdgeInsets.symmetric(vertical: 12), padding: const EdgeInsets.symmetric(vertical: 14),
child: MyText( child: MyText(
label, label,
fontSize: 16, fontSize: 16,
@ -177,12 +233,13 @@ class WelcomeScreen extends StatelessWidget {
), ),
), ),
style: ElevatedButton.styleFrom( style: ElevatedButton.styleFrom(
backgroundColor: const Color(0xFFB71C1C), backgroundColor: const Color(0xFFB71C1C), // Red background
side: const BorderSide(color: Colors.white70), foregroundColor: Colors.white,
shape: RoundedRectangleBorder( shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12), borderRadius: BorderRadius.circular(14),
), ),
elevation: 4, elevation: 4,
shadowColor: Colors.black26,
), ),
onPressed: () { onPressed: () {
if (option == null) { if (option == null) {
@ -195,3 +252,67 @@ class WelcomeScreen extends StatelessWidget {
); );
} }
} }
/// Custom red wave background shifted lower to reduce red area at top
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;
}