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

navbar and setting bar is done

Browse Source
This commit is contained in:
Daniah Ayad Al-sultani
2025-11-30 16:19:30 +03:00
parent 32894a5a7d
commit 2ac504754e
15 changed files with 620 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

331
lib/widgets/auth_form.dart
View File

@@ -1,4 +1,5 @@
import 'package:flutter/material.dart';
import '../screens/main_screen.dart';
import 'onboarding_button.dart';
class AuthForm extends StatefulWidget {
@@ -13,120 +14,190 @@ class AuthForm extends StatefulWidget {
class _AuthFormState extends State<AuthForm> {
bool _obscure = true;
// Focus nodes for text fields
late FocusNode _usernameFocusNode;
late FocusNode _passwordFocusNode;
void _handleLogin() {
// Unfocus any focused text field
_usernameFocusNode.unfocus();
_passwordFocusNode.unfocus();
// Call the onSubmit callback if provided (for any other logic you might have)
if (widget.onSubmit != null) {
widget.onSubmit!();
}
// Navigate to the AttendancePage
Navigator.pushReplacement(
context,
MaterialPageRoute(builder: (context) => const MainPage()),
);
}
@override
void initState() {
super.initState();
// Initialize focus nodes
_usernameFocusNode = FocusNode();
_passwordFocusNode = FocusNode();
}
@override
void dispose() {
// Clean up focus nodes when widget is disposed
_usernameFocusNode.dispose();
_passwordFocusNode.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
// Get screen dimensions
final screenSize = MediaQuery.of(context).size;
final screenWidth = screenSize.width;
final screenHeight = screenSize.height;
// Calculate responsive dimensions
final formWidth = screenWidth > 600 ? screenWidth * 0.5 : screenWidth * 0.9;
final formHeight =
screenHeight > 800 ? screenHeight * 0.6 : screenHeight * 0.8;
final borderWidth = formWidth + 20;
final titleFontSize = screenWidth > 600 ? 28.0 : 24.0;
final labelFontSize = screenWidth > 600 ? 18.0 : 16.0;
final fieldFontSize = screenWidth > 600 ? 18.0 : 16.0;
final verticalSpacing = screenHeight > 800 ? 34.0 : 24.0;
final fieldSpacing = screenHeight > 800 ? 30.0 : 20.0;
final buttonSpacing = screenHeight > 800 ? 100.0 : 60.0;
final bottomSpacing = screenHeight > 800 ? 40.0 : 20.0;
final horizontalPadding = screenWidth > 600 ? 30.0 : 25.0;
final verticalPadding = screenHeight > 800 ? 38.0 : 28.0;
return Directionality(
textDirection: TextDirection.rtl,
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,
child: FocusScope(
child: Stack(
alignment: Alignment.center,
children: [
// Border container - decorative element behind the form
Container(
width: borderWidth,
constraints: BoxConstraints(
minHeight: formHeight + 40,
maxHeight:
formHeight + 80, // Allows shrinking when keyboard opens
),
decoration: BoxDecoration(
color: Colors.transparent,
borderRadius: BorderRadius.circular(32),
border: Border.all(color: const Color(0xDD00C28E), width: 1),
),
),
),
// 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),
),
],
// Main form container
Container(
width: formWidth,
padding: EdgeInsets.symmetric(
horizontal: horizontalPadding,
vertical: verticalPadding,
),
decoration: BoxDecoration(
color: const Color(0xFFEEFFFA),
borderRadius: BorderRadius.circular(28),
boxShadow: const [
BoxShadow(
color: Colors.black26,
blurRadius: 10,
offset: Offset(0, 5),
),
],
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.min,
children: [
/// Title
Center(
child: Text(
"تسجيل دخول",
style: TextStyle(
fontSize: titleFontSize,
fontWeight: FontWeight.bold,
color: Colors.black87,
),
),
),
SizedBox(height: verticalSpacing),
/// Username Label
Align(
alignment: Alignment.centerRight,
child: Text(
"اسم المستخدم",
style: TextStyle(
fontSize: labelFontSize,
color: Colors.black87,
),
),
),
const SizedBox(height: 8),
_buildField(
hint: "اسم المستخدم",
obscure: false,
focusNode: _usernameFocusNode,
textInputAction: TextInputAction.next,
onSubmitted: (_) {
// Move focus to password field when next is pressed
FocusScope.of(context).requestFocus(_passwordFocusNode);
},
fontSize: fieldFontSize,
),
SizedBox(height: fieldSpacing),
/// Password Label
Align(
alignment: Alignment.centerRight,
child: Text(
"كلمة المرور",
style: TextStyle(
fontSize: labelFontSize,
color: Colors.black87,
),
),
),
const SizedBox(height: 8),
_buildField(
hint: "كلمة المرور",
obscure: _obscure,
hasEye: true,
focusNode: _passwordFocusNode,
textInputAction: TextInputAction.done,
onSubmitted:
(_) =>
_handleLogin(), // Added parentheses to call the method
fontSize: fieldFontSize,
),
SizedBox(height: buttonSpacing), // Responsive spacing
Center(
child: OnboardingButton(
text: "تسجيل دخول",
backgroundColor: const Color.fromARGB(239, 35, 87, 74),
onPressed: _handleLogin,
),
),
SizedBox(height: bottomSpacing),
],
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.min,
children: [
/// Title
const Center(
child: Text(
"تسجيل دخول",
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
color: Colors.black87,
),
),
),
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),
],
),
),
],
],
),
),
);
}
@@ -135,42 +206,48 @@ class _AuthFormState extends State<AuthForm> {
required String hint,
required bool obscure,
bool hasEye = false,
FocusNode? focusNode,
TextInputAction? textInputAction,
Function(String)? onSubmitted,
required double fontSize,
}) {
return Container(
decoration: BoxDecoration(
color: const Color(0xDEDEDEDE),
borderRadius: BorderRadius.circular(7),
boxShadow: const [
BoxShadow(
color: Colors.black26,
blurRadius: 6,
offset: Offset(0, 2),
),
BoxShadow(color: Colors.black26, blurRadius: 6, offset: Offset(0, 2)),
],
),
child: TextField(
focusNode: focusNode,
obscureText: obscure,
textAlign: TextAlign.right,
style: const TextStyle(fontSize: 16),
textInputAction: textInputAction,
onSubmitted: onSubmitted,
style: TextStyle(fontSize: fontSize),
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,
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,
),
),
);
}
}
}