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

258
lib/widgets/auth_form.dart
View File

@@ -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<AuthForm> createState() => _AuthFormState();
}
class _AuthFormState extends State<AuthForm> {
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,
),
),
);
}
}
}