dania/finger_print_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

auth form is finished

Browse Source
This commit is contained in:
Daniah Ayad Al-sultani
2025-11-29 15:19:03 +03:00
parent b50c2b578b
commit 32894a5a7d
5 changed files with 207 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
lib/screens/auth_screen.dart
View File

@@ -1,7 +1,6 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import '../widgets/app_background.dart'; import '../widgets/app_background.dart';
import '../widgets/auth_form.dart'; import '../widgets/auth_form.dart';
import '../widgets/onboarding_button.dart';
class AuthScreen extends StatelessWidget { class AuthScreen extends StatelessWidget {
const AuthScreen({super.key}); const AuthScreen({super.key});
@@ -9,15 +8,26 @@ class AuthScreen extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Scaffold( return Scaffold(
resizeToAvoidBottomInset: true,
body: AppBackground( body: AppBackground(
child: Center( child: SafeArea(
child: Text( child: Column(
"Auth Screen", children: [
style: TextStyle( const SizedBox(height: 60),
color: Colors.white, // Logo
fontSize: 26, Center(
fontWeight: FontWeight.bold, 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(),
),
),
),
],
), ),
), ),
), ),

254
lib/widgets/auth_form.dart
View File

@@ -1,136 +1,174 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'onboarding_button.dart';
class AuthForm extends StatefulWidget { class AuthForm extends StatefulWidget {
const AuthForm({super.key, required this.onSubmit}); final VoidCallback? onSubmit;
final VoidCallback onSubmit; const AuthForm({super.key, this.onSubmit});
@override @override
State<AuthForm> createState() => _AuthFormState(); State<AuthForm> createState() => _AuthFormState();
} }
class _AuthFormState extends State<AuthForm> { class _AuthFormState extends State<AuthForm> {
bool _obscure = true; bool _obscure = true;
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Directionality( return Directionality(
textDirection: TextDirection.rtl, textDirection: TextDirection.rtl,
child: Container( child: Stack(
margin: const EdgeInsets.symmetric(horizontal: 28), alignment: Alignment.center,
padding: const EdgeInsets.symmetric(horizontal: 22, vertical: 26), children: [
decoration: BoxDecoration( // Border container - decorative element behind the form
color: const Color(0xA6F4FFFD), // Light mint white Container(
borderRadius: BorderRadius.circular(26), width: 360,
boxShadow: [ constraints: const BoxConstraints(
BoxShadow( minHeight: 500,
color: const Color(0x803EFECB), // green glow shadow maxHeight: 580, // Allows shrinking when keyboard opens
blurRadius: 35, ),
spreadRadius: -5, 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), // Main form container
//lable Container(
const Text( width: 340,
"اسم المستخدم", padding: const EdgeInsets.symmetric(horizontal: 25, vertical: 38),
style: TextStyle(fontSize: 16, color: Colors.black87 decoration: BoxDecoration(
), color: const Color(0xFFEEFFFA),
), borderRadius: BorderRadius.circular(28),
boxShadow: const [
const SizedBox(height: 6), BoxShadow(
color: Colors.black26,
//username field blurRadius: 10,
Container( offset: Offset(0, 5),
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,
),
), ),
), ],
), ),
child: Column(
const SizedBox(height: 22), crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.min,
/// PASSWORD LABEL children: [
const Text( /// Title
"كلمة المرور", const Center(
style: TextStyle( child: Text(
fontSize: 15, "تسجيل دخول",
color: Colors.black87, style: TextStyle(
), fontSize: 24,
), fontWeight: FontWeight.bold,
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,
), ),
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,
), ),
), ),
); );

54
lib/widgets/onboarding_button.dart
View File

@@ -3,27 +3,49 @@ import 'package:flutter/material.dart';
class OnboardingButton extends StatelessWidget { class OnboardingButton extends StatelessWidget {
final String text; final String text;
final VoidCallback? onPressed; 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 @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return ElevatedButton( return Container(
onPressed: onPressed ?? () {}, decoration: BoxDecoration(
style: ElevatedButton.styleFrom( boxShadow: [
backgroundColor: const Color(0xFF2D2D2D), BoxShadow(
foregroundColor: Colors.white, color: const Color.fromARGB(59, 59, 59, 59),
padding: const EdgeInsets.symmetric(horizontal: 80, vertical: 10), spreadRadius: 1,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(14)), blurRadius: 14,
elevation: 0, offset: const Offset(0, 4),
),
],
), ),
child: Text( child: ElevatedButton(
text, onPressed: onPressed,
style: const TextStyle( style: ElevatedButton.styleFrom(
fontFamily: 'AbdElRady', backgroundColor: backgroundColor,
color: Colors.white, foregroundColor: Colors.white,
fontSize: 20, disabledForegroundColor: Colors.white,
fontWeight: FontWeight.w700, 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,
),
), ),
), ),
); );

8
pubspec.lock
View File

@@ -81,14 +81,6 @@ packages:
url: "https://pub.dev" url: "https://pub.dev"
source: hosted source: hosted
version: "1.0.2" 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: fake_async:
dependency: transitive dependency: transitive
description: description:

1
pubspec.yaml
View File

@@ -10,7 +10,6 @@ environment:
dependencies: dependencies:
flutter: flutter:
sdk: flutter sdk: flutter
cupertino_icons: ^1.0.8
flutter_svg: ^2.0.9 flutter_svg: ^2.0.9
dev_dependencies: dev_dependencies: