diff --git a/lib/screens/auth_screen.dart b/lib/screens/auth_screen.dart index 846470e..e7772a4 100644 --- a/lib/screens/auth_screen.dart +++ b/lib/screens/auth_screen.dart @@ -1,7 +1,6 @@ import 'package:flutter/material.dart'; import '../widgets/app_background.dart'; import '../widgets/auth_form.dart'; -import '../widgets/onboarding_button.dart'; class AuthScreen extends StatelessWidget { const AuthScreen({super.key}); @@ -9,18 +8,29 @@ class AuthScreen extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( + resizeToAvoidBottomInset: true, body: AppBackground( - child: Center( - child: Text( - "Auth Screen", - style: TextStyle( - color: Colors.white, - fontSize: 26, - fontWeight: FontWeight.bold, - ), + child: SafeArea( + child: Column( + children: [ + const SizedBox(height: 60), + // Logo + Center( + child: Image.asset("assets/images/logo2.png", width: 200), + ), + // const SizedBox(height: 15), + // Form - taking remaining space and centered + Expanded( + child: Center( + child: SingleChildScrollView( + child: const AuthForm(), + ), + ), + ), + ], ), ), ), ); } -} +} \ No newline at end of file diff --git a/lib/widgets/auth_form.dart b/lib/widgets/auth_form.dart index 0ce1ec4..1bebaf9 100644 --- a/lib/widgets/auth_form.dart +++ b/lib/widgets/auth_form.dart @@ -1,138 +1,176 @@ import 'package:flutter/material.dart'; +import 'onboarding_button.dart'; class AuthForm extends StatefulWidget { - const AuthForm({super.key, required this.onSubmit}); + final VoidCallback? onSubmit; - final VoidCallback onSubmit; + const AuthForm({super.key, this.onSubmit}); @override State createState() => _AuthFormState(); } class _AuthFormState extends State { - bool _obscure = true; + @override Widget build(BuildContext context) { return Directionality( textDirection: TextDirection.rtl, - child: Container( - margin: const EdgeInsets.symmetric(horizontal: 28), - padding: const EdgeInsets.symmetric(horizontal: 22, vertical: 26), - decoration: BoxDecoration( - color: const Color(0xA6F4FFFD), // Light mint white - borderRadius: BorderRadius.circular(26), - boxShadow: [ - BoxShadow( - color: const Color(0x803EFECB), // green glow shadow - blurRadius: 35, - spreadRadius: -5, + child: Stack( + alignment: Alignment.center, + children: [ + // Border container - decorative element behind the form + Container( + width: 360, + constraints: const BoxConstraints( + minHeight: 500, + maxHeight: 580, // Allows shrinking when keyboard opens + ), + decoration: BoxDecoration( + color: Colors.transparent, + borderRadius: BorderRadius.circular(32), + border: Border.all( + color: const Color(0xDD00C28E), + width: 1, + ), ), - ], - - border: Border.all( - color: const Color(0xFF3EFECB), // Dark border - width: 2, ), - ), - child: Column( - mainAxisSize: MainAxisSize.min, - children: [ - // main lable - const Text( - "تسجيل دخول", - style: TextStyle( - fontSize: 24, - fontWeight: FontWeight.w700, - color: Color(0xFF00382A), - ), - ), - - const SizedBox(height: 24), - //lable - const Text( - "اسم المستخدم", - style: TextStyle(fontSize: 16, color: Colors.black87 - ), - ), - - const SizedBox(height: 6), - - //username field - Container( - decoration: BoxDecoration( - color: const Color(0xDEDEDEDE), - borderRadius: BorderRadius.circular(7), - boxShadow: [ - BoxShadow( - color: Colors.black26, - blurRadius: 4, - offset: Offset(0, 2), - ), - ], - ), - child: const TextField( - decoration: InputDecoration( - hintText: "اسم المستخدم", - border: InputBorder.none, - contentPadding: EdgeInsets.symmetric( - horizontal: 16, - vertical: 12, - ), + + // Main form container + Container( + width: 340, + padding: const EdgeInsets.symmetric(horizontal: 25, vertical: 38), + decoration: BoxDecoration( + color: const Color(0xFFEEFFFA), + borderRadius: BorderRadius.circular(28), + boxShadow: const [ + BoxShadow( + color: Colors.black26, + blurRadius: 10, + offset: Offset(0, 5), ), - ), + ], ), - - const SizedBox(height: 22), - - /// PASSWORD LABEL - const Text( - "كلمة المرور", - style: TextStyle( - fontSize: 15, - color: Colors.black87, - ), - ), - - - /// PASSWORD FIELD - Container( - decoration: BoxDecoration( - color: const Color(0xFFE3E3E3), - borderRadius: BorderRadius.circular(12), - boxShadow: [ - BoxShadow( - color: Colors.black26, - blurRadius: 4, - offset: Offset(0, 2), - ), - ], - ), - child: TextField( - obscureText: _obscure, - decoration: InputDecoration( - hintText: "كلمة المرور", - border: InputBorder.none, - contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12), - - suffixIcon: IconButton( - icon: Icon( - _obscure ? Icons.visibility : Icons.visibility_off, - color: Colors.black54, + child: Column( + crossAxisAlignment: CrossAxisAlignment.stretch, + mainAxisSize: MainAxisSize.min, + children: [ + /// Title + const Center( + child: Text( + "تسجيل دخول", + style: TextStyle( + fontSize: 24, + fontWeight: FontWeight.bold, + color: Colors.black87, ), - onPressed: () { - setState(() => _obscure = !_obscure); - }, ), ), - ), + + const SizedBox(height: 34), + + /// Username Label + const Align( + alignment: Alignment.centerRight, + child: Text( + "اسم المستخدم", + style: TextStyle( + fontSize: 16, + color: Colors.black87, + ), + ), + ), + const SizedBox(height: 8), + + _buildField( + hint: "اسم المستخدم", + obscure: false, + ), + + const SizedBox(height: 30), + + /// Password Label + const Align( + alignment: Alignment.centerRight, + child: Text( + "كلمة المرور", + style: TextStyle( + fontSize: 16, + color: Colors.black87, + ), + ), + ), + const SizedBox(height: 8), + + _buildField( + hint: "كلمة المرور", + obscure: _obscure, + hasEye: true, + ), + + const SizedBox(height: 100), // Restored original spacing + + Center( + child: OnboardingButton( + text: "تسجيل دخول", + backgroundColor: const Color.fromARGB(239, 35, 87, 74), + onPressed: widget.onSubmit, + + + ), + + ), + + const SizedBox(height: 40), + ], ), + ), + ], + ), + ); + } - const SizedBox(height: 26), - - ], + Widget _buildField({ + required String hint, + required bool obscure, + bool hasEye = false, + }) { + return Container( + decoration: BoxDecoration( + color: const Color(0xDEDEDEDE), + borderRadius: BorderRadius.circular(7), + boxShadow: const [ + BoxShadow( + color: Colors.black26, + blurRadius: 6, + offset: Offset(0, 2), + ), + ], + ), + child: TextField( + obscureText: obscure, + textAlign: TextAlign.right, + style: const TextStyle(fontSize: 16), + decoration: InputDecoration( + hintText: hint, + hintStyle: const TextStyle(color: Colors.black54), + border: InputBorder.none, + contentPadding: + const EdgeInsets.symmetric(vertical: 16, horizontal: 16), + suffixIcon: hasEye + ? IconButton( + icon: Icon( + obscure ? Icons.visibility_off : Icons.visibility, + color: Colors.black54, + ), + onPressed: () { + setState(() => _obscure = !obscure); + }, + ) + : null, ), ), ); } -} +} \ No newline at end of file diff --git a/lib/widgets/onboarding_button.dart b/lib/widgets/onboarding_button.dart index a33d94f..d91c657 100644 --- a/lib/widgets/onboarding_button.dart +++ b/lib/widgets/onboarding_button.dart @@ -3,29 +3,51 @@ import 'package:flutter/material.dart'; class OnboardingButton extends StatelessWidget { final String text; final VoidCallback? onPressed; + final Color backgroundColor; - const OnboardingButton({super.key, required this.text, this.onPressed}); + const OnboardingButton({ + super.key, + required this.text, + this.onPressed, + this.backgroundColor = const Color(0xFF2D2D2D), + }); @override Widget build(BuildContext context) { - return ElevatedButton( - onPressed: onPressed ?? () {}, - style: ElevatedButton.styleFrom( - backgroundColor: const Color(0xFF2D2D2D), - foregroundColor: Colors.white, - padding: const EdgeInsets.symmetric(horizontal: 80, vertical: 10), - shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(14)), - elevation: 0, + return Container( + decoration: BoxDecoration( + boxShadow: [ + BoxShadow( + color: const Color.fromARGB(59, 59, 59, 59), + spreadRadius: 1, + blurRadius: 14, + offset: const Offset(0, 4), + ), + ], ), - child: Text( - text, - style: const TextStyle( - fontFamily: 'AbdElRady', - color: Colors.white, - fontSize: 20, - fontWeight: FontWeight.w700, + child: ElevatedButton( + onPressed: onPressed, + style: ElevatedButton.styleFrom( + backgroundColor: backgroundColor, + foregroundColor: Colors.white, + disabledForegroundColor: Colors.white, + disabledBackgroundColor: backgroundColor, + padding: const EdgeInsets.symmetric(horizontal: 80, vertical: 10), + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(16), + ), + elevation: 8, // Increased elevation for more prominent shadow + shadowColor: const Color(0x47000000), // More defined shadow color + ), + child: Text( + text, + style: const TextStyle( + color: Colors.white, + fontSize: 20, + fontWeight: FontWeight.w600, + ), ), ), ); } -} +} \ No newline at end of file diff --git a/pubspec.lock b/pubspec.lock index 519e4cf..ed985c9 100644 --- a/pubspec.lock +++ b/pubspec.lock @@ -81,14 +81,6 @@ packages: url: "https://pub.dev" source: hosted version: "1.0.2" - cupertino_icons: - dependency: "direct main" - description: - name: cupertino_icons - sha256: ba631d1c7f7bef6b729a622b7b752645a2d076dba9976925b8f25725a30e1ee6 - url: "https://pub.dev" - source: hosted - version: "1.0.8" fake_async: dependency: transitive description: diff --git a/pubspec.yaml b/pubspec.yaml index 303eeea..3d18b21 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -10,7 +10,6 @@ environment: dependencies: flutter: sdk: flutter - cupertino_icons: ^1.0.8 flutter_svg: ^2.0.9 dev_dependencies: