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

login agnimation has been fixed + request holiday screen was created

Browse Source
This commit is contained in:
Daniah Ayad Al-sultani
2025-12-04 17:23:06 +03:00
parent 209080842a
commit 08132b52a9
11 changed files with 1200 additions and 443 deletions
Download Patch File Download Diff File Expand all files Collapse all files

486
lib/widgets/login_animation.dart Normal file
View File

@@ -0,0 +1,486 @@
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import '../widgets/app_background.dart';
class LoginAnimationScreen extends StatefulWidget {
final bool isLogin;
final bool isSuccess;
const LoginAnimationScreen({
super.key,
required this.isLogin,
required this.isSuccess,
});
@override
State<LoginAnimationScreen> createState() => _LoginAnimationScreenState();
}
class _LoginAnimationScreenState extends State<LoginAnimationScreen>
with TickerProviderStateMixin {
late AnimationController ringController;
late AnimationController progressController;
late Animation<double> ringAnimation;
late Animation<double> progressAnimation;
// ERROR pulse animation
late AnimationController errorPulseController;
late Animation<double> errorPulseAnimation;
// SUCCESS one-time pulse
late AnimationController successPulseController;
late Animation<double> successPulseAnimation;
bool showResult = false;
@override
void initState() {
super.initState();
// MAIN loading ripple animations
ringController = AnimationController(
vsync: this,
duration: const Duration(seconds: 1),
);
progressController = AnimationController(
vsync: this,
duration: const Duration(seconds: 2),
);
ringAnimation = Tween<double>(
begin: 0,
end: 1,
).animate(CurvedAnimation(parent: ringController, curve: Curves.easeOut));
progressAnimation = Tween<double>(begin: 0, end: 1).animate(
CurvedAnimation(parent: progressController, curve: Curves.linear),
);
// ERROR pulse animation
errorPulseController = AnimationController(
vsync: this,
duration: const Duration(seconds: 1),
);
errorPulseAnimation = Tween<double>(begin: 0, end: 1).animate(
CurvedAnimation(parent: errorPulseController, curve: Curves.easeOut),
);
// SUCCESS one-time pulse
successPulseController = AnimationController(
vsync: this,
duration: const Duration(seconds: 1),
);
successPulseAnimation = Tween<double>(begin: 0, end: 1).animate(
CurvedAnimation(parent: successPulseController, curve: Curves.easeOut),
);
startAnimations();
// MAIN DELAY (same as before)
Future.delayed(const Duration(seconds: 2), () {
if (mounted) {
setState(() => showResult = true);
ringController.stop();
progressController.stop();
if (!widget.isSuccess) {
startErrorPulse();
} else {
successPulseController.forward(); // ONE-TIME BEAT
Future.delayed(const Duration(seconds: 2), () {
if (mounted) Navigator.of(context).pop();
});
}
}
});
}
void startAnimations() {
progressController.repeat();
startPulseAnimation();
}
void startPulseAnimation() {
ringController.forward().then((_) {
ringController.reset();
if (!showResult) startPulseAnimation();
});
}
void startErrorPulse() {
errorPulseController.forward().then((_) {
errorPulseController.reset();
if (showResult && !widget.isSuccess) startErrorPulse();
});
}
@override
void dispose() {
ringController.dispose();
progressController.dispose();
errorPulseController.dispose();
successPulseController.dispose();
super.dispose();
}
Widget _buildIcon() {
if (!showResult) {
return SvgPicture.asset(
"assets/images/finger_print.svg",
key: const ValueKey("fingerprint"),
width: 70,
height: 70,
);
} else if (widget.isSuccess) {
return SizedBox(
width: 120,
height: 120,
child: Image.asset(
"assets/images/tick.png",
key: const ValueKey("success"),
fit: BoxFit.contain,
),
);
} else {
return SizedBox(
width: 120,
height: 120,
child: Image.asset(
"assets/images/error.png",
key: const ValueKey('error'),
fit: BoxFit.contain,
),
);
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: AppBackground(
child: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text(
widget.isLogin ? "تسجيل الدخول" : "تسجيل خروج",
style: const TextStyle(
color: Colors.white,
fontSize: 30,
fontWeight: FontWeight.bold,
decoration: TextDecoration.none,
),
),
const SizedBox(height: 100),
Container(
width: 280,
height: 400,
decoration: BoxDecoration(
color: const Color(0xFFEEFFFA),
borderRadius: BorderRadius.circular(38),
boxShadow: [
BoxShadow(
color: const Color(0x34000000),
blurRadius: 20,
offset: const Offset(0, 10),
),
],
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SizedBox(
width: 160,
height: 160,
child: Stack(
alignment: Alignment.center,
children: [
// GREY CIRCLE (base)
Container(
width: 120,
height: 120,
decoration: const BoxDecoration(
color: Color(0xFFE5E5E5),
shape: BoxShape.circle,
),
),
// MAIN ICON SWITCHER
AnimatedSwitcher(
duration: const Duration(milliseconds: 500),
child: _buildIcon(),
),
// LOADING MODE
if (!showResult)
Positioned.fill(
child: AnimatedBuilder(
animation: progressAnimation,
builder:
(_, __) => CustomPaint(
painter: _ProgressRingPainter(
progress: progressAnimation.value,
),
),
),
),
if (!showResult)
Positioned.fill(
child: AnimatedBuilder(
animation: ringAnimation,
builder:
(_, __) => CustomPaint(
painter: _PulseRingsPainter(
progress: ringAnimation.value,
),
),
),
),
// ERROR ANIMATION
if (showResult && !widget.isSuccess)
Positioned.fill(
child: AnimatedBuilder(
animation: errorPulseAnimation,
builder:
(_, __) => CustomPaint(
painter: _ErrorPulsePainter(
progress: errorPulseAnimation.value,
),
),
),
),
// SUCCESS ONE-TIME PULSE
if (showResult && widget.isSuccess)
Positioned.fill(
child: AnimatedBuilder(
animation: successPulseAnimation,
builder:
(_, __) => CustomPaint(
painter: _SuccessPulsePainter(
progress: successPulseAnimation.value,
),
),
),
),
],
),
),
const SizedBox(height: 40),
AnimatedSwitcher(
duration: const Duration(milliseconds: 500),
child:
showResult
? Text(
widget.isSuccess
? (widget.isLogin
? "تم تسجيل دخولك بنجاح"
: "تم تسجيل خروجك بنجاح")
: "تم رفض تسجيل الدخول",
key: ValueKey("text_${widget.isSuccess}"),
style: const TextStyle(
fontSize: 17,
fontWeight: FontWeight.w600,
decoration: TextDecoration.none,
),
)
: Text(
widget.isLogin
? "يتم تسجيل الدخول..."
: "يتم تسجيل الخروج...",
key: const ValueKey("loading_text"),
style: const TextStyle(
fontSize: 16,
decoration: TextDecoration.none,
),
),
),
// RETRY BUTTON
if (showResult && !widget.isSuccess) ...[
const SizedBox(height: 20),
GestureDetector(
onTap: () {
setState(() => showResult = false);
errorPulseController.stop();
successPulseController.reset();
startAnimations();
Future.delayed(const Duration(seconds: 2), () {
if (!mounted) return;
setState(() => showResult = true);
ringController.stop();
progressController.stop();
if (!widget.isSuccess) {
startErrorPulse();
} else {
successPulseController.forward();
Future.delayed(const Duration(seconds: 2), () {
if (mounted) Navigator.of(context).pop();
});
}
});
},
child: const Text(
"أعد المحاولة",
style: TextStyle(
color: Color(0xFFB00020),
fontSize: 16,
fontWeight: FontWeight.w600,
decoration: TextDecoration.underline,
),
),
),
],
],
),
),
],
),
),
),
);
}
}
// ------------------------- PAINTERS -------------------------- //
class _ProgressRingPainter extends CustomPainter {
final double progress;
_ProgressRingPainter({required this.progress});
@override
void paint(Canvas canvas, Size size) {
final center = size.center(Offset.zero);
final radius = 50.0;
final bgPaint =
Paint()
..color = const Color(0x0032C599)
..style = PaintingStyle.stroke
..strokeWidth = 3;
canvas.drawCircle(center, radius, bgPaint);
final fgPaint =
Paint()
..color = const Color(0xC40A4433)
..style = PaintingStyle.stroke
..strokeWidth = 3
..strokeCap = StrokeCap.round;
final sweep = 2 * 3.1415926 * progress;
canvas.drawArc(
Rect.fromCircle(center: center, radius: radius),
-1.5708,
sweep,
false,
fgPaint,
);
}
@override
bool shouldRepaint(_) => true;
}
class _PulseRingsPainter extends CustomPainter {
final double progress;
_PulseRingsPainter({required this.progress});
@override
void paint(Canvas canvas, Size size) {
final center = size.center(Offset.zero);
const baseRadius = 60.0;
const maxRadius = 130.0;
for (final phase in [0.0, 0.25, 0.5]) {
final rp = (progress - phase).clamp(0.0, 1.0);
if (rp > 0) {
final radius = baseRadius + (maxRadius - baseRadius) * rp;
final opacity = (1 - rp) * 0.45;
final paint =
Paint()
..color = const Color(0xFF32C59A).withOpacity(opacity)
..style = PaintingStyle.stroke
..strokeWidth = 2;
canvas.drawCircle(center, radius, paint);
}
}
}
@override
bool shouldRepaint(_) => true;
}
// ERROR PAINTER
class _ErrorPulsePainter extends CustomPainter {
final double progress;
_ErrorPulsePainter({required this.progress});
@override
void paint(Canvas canvas, Size size) {
final center = size.center(Offset.zero);
// static ring
final staticPaint =
Paint()
..color = const Color(0xFFB00020).withOpacity(0.20)
..style = PaintingStyle.stroke
..strokeWidth = 3;
canvas.drawCircle(center, 70, staticPaint);
// pulse ring
final radius = 70 + (20 * progress);
final opacity = (1 - progress) * 0.45;
final pulsePaint =
Paint()
..color = const Color(0xFFB00020).withOpacity(opacity)
..style = PaintingStyle.stroke
..strokeWidth = 3;
canvas.drawCircle(center, radius, pulsePaint);
}
@override
bool shouldRepaint(_) => true;
}
// SUCCESS one-time pulse
class _SuccessPulsePainter extends CustomPainter {
final double progress;
_SuccessPulsePainter({required this.progress});
@override
void paint(Canvas canvas, Size size) {
final center = size.center(Offset.zero);
final radius = 70 + (20 * progress);
final opacity = (1 - progress) * 0.40;
final paint =
Paint()
..color = const Color(0xFF32C59A).withOpacity(opacity)
..style = PaintingStyle.stroke
..strokeWidth = 3;
canvas.drawCircle(center, radius, paint);
}
@override
bool shouldRepaint(_) => true;
}

353
lib/widgets/login_animation_screen.dart
View File

@@ -1,353 +0,0 @@
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import '../widgets/app_background.dart';
class LoginAnimationScreen extends StatefulWidget {
final bool isLogin;
final bool isSuccess;
const LoginAnimationScreen({
super.key,
required this.isLogin,
required this.isSuccess,
});
@override
State<LoginAnimationScreen> createState() => _LoginAnimationScreenState();
}
class _LoginAnimationScreenState extends State<LoginAnimationScreen>
with TickerProviderStateMixin {
late AnimationController ringController;
late AnimationController progressController;
late Animation<double> ringAnimation;
late Animation<double> progressAnimation;
bool showResult = false;
@override
void initState() {
super.initState();
ringController = AnimationController(
vsync: this,
duration: const Duration(seconds: 1),
);
progressController = AnimationController(
vsync: this,
duration: const Duration(seconds: 2),
);
ringAnimation = Tween<double>(
begin: 0.0,
end: 1.0,
).animate(CurvedAnimation(parent: ringController, curve: Curves.easeOut));
progressAnimation = Tween<double>(begin: 0.0, end: 1.0).animate(
CurvedAnimation(parent: progressController, curve: Curves.linear),
);
startAnimations();
Future.delayed(const Duration(seconds: 2), () {
if (mounted) {
setState(() {
showResult = true;
});
ringController.stop();
progressController.stop();
if (widget.isSuccess) {
Future.delayed(const Duration(seconds: 2), () {
if (mounted) Navigator.of(context).pop();
});
}
}
});
}
void startAnimations() {
progressController.repeat();
startPulseAnimation();
}
void startPulseAnimation() {
ringController.forward().then((_) {
ringController.reset();
if (!showResult) startPulseAnimation();
});
}
@override
void dispose() {
ringController.dispose();
progressController.dispose();
super.dispose();
}
// FIXED: Simplified _buildIcon method that returns the appropriate SVG
Widget _buildIcon() {
if (!showResult) {
// Loading state - fingerprint
return SvgPicture.asset(
"assets/images/finger_print.svg",
key: const ValueKey('fingerprint'),
width: 70,
height: 70,
placeholderBuilder: (context) => Icon(
Icons.fingerprint,
size: 70,
color: const Color(0xFF102D25),
),
);
} else if (widget.isSuccess) {
// Success state - tick mark
return Image.asset(
"assets/images/tick.png",
key: const ValueKey('success'),
width: 120,
height: 120,
fit: BoxFit.contain,
// placeholderBuilder: (context) => Icon(
// Icons.check_circle,
// size: 70,
// color: const Color(0xFF32C59A),
// ),
);
} else {
// Error state - error icon
return Image.asset(
"assets/images/error.png",
key: const ValueKey('error'),
width: 120,
height: 120,
fit: BoxFit.contain,
);
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: AppBackground(
child: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text(
widget.isLogin ? "تسجيل الدخول" : "تسجيل خروج",
style: const TextStyle(
color: Colors.white,
fontSize: 30,
fontWeight: FontWeight.bold,
decoration: TextDecoration.none,
),
),
const SizedBox(height: 100),
Container(
width: 280,
height: 400,
decoration: BoxDecoration(
color: const Color(0xFFEEFFFA),
borderRadius: BorderRadius.circular(38),
boxShadow: [
BoxShadow(
color: const Color(0x34000000),
blurRadius: 20,
offset: const Offset(0, 10),
),
],
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SizedBox(
width: 160,
height: 160,
child: Stack(
alignment: Alignment.center,
children: [
Container(
width: 120,
height: 120,
decoration: const BoxDecoration(
color: Color(0xFFE5E5E5),
shape: BoxShape.circle,
),
),
// FIXED: AnimatedSwitcher with proper key handling
AnimatedSwitcher(
duration: const Duration(milliseconds: 500),
child: _buildIcon(),
layoutBuilder: (currentChild, previousChildren) {
return Stack(
alignment: Alignment.center,
children: <Widget>[
...previousChildren,
if (currentChild != null) currentChild,
],
);
},
transitionBuilder: (child, animation) {
return FadeTransition(
opacity: animation,
child: ScaleTransition(
scale: animation,
child: child,
),
);
},
),
if (!showResult)
Positioned.fill(
child: AnimatedBuilder(
animation: progressAnimation,
builder: (_, __) {
return CustomPaint(
painter: _ProgressRingPainter(
progress: progressAnimation.value,
),
);
},
),
),
if (!showResult)
Positioned.fill(
child: AnimatedBuilder(
animation: ringAnimation,
builder: (_, __) {
return CustomPaint(
painter: _PulseRingsPainter(
progress: ringAnimation.value,
),
);
},
),
),
],
),
),
const SizedBox(height: 40),
// Text AnimatedSwitcher with proper key handling
AnimatedSwitcher(
duration: const Duration(milliseconds: 500),
child: showResult
? Text(
widget.isSuccess
? "تم تسجيل دخولك بنجاح"
: "تم رفض تسجيل الدخول ",
key: ValueKey("text_${widget.isSuccess}"),
style: const TextStyle(
fontSize: 17,
fontWeight: FontWeight.w600,
decoration: TextDecoration.none,
),
)
: const Text(
"يتم تسجيل الدخول ...",
key: ValueKey("loading_text"),
style: TextStyle(
fontSize: 16,
decoration: TextDecoration.none,
),
),
),
],
),
),
],
),
),
),
);
}
}
class _ProgressRingPainter extends CustomPainter {
final double progress;
_ProgressRingPainter({required this.progress});
@override
void paint(Canvas canvas, Size size) {
final center = size.center(Offset.zero);
// radius slightly bigger than gray circle (60)
final radius = 50.0;
// background circle (very subtle)
final bgPaint = Paint()
..color = const Color(0x0032C599)
..style = PaintingStyle.stroke
..strokeWidth = 3.0;
canvas.drawCircle(center, radius, bgPaint);
// foreground arc that animates
final progressPaint = Paint()
..color = const Color(0xC40A4433)
..style = PaintingStyle.stroke
..strokeWidth = 3.0
..strokeCap = StrokeCap.round;
const startAngle = -1.5708; // -90° in radians
final sweepAngle = 2 * 3.1415926 * progress;
canvas.drawArc(
Rect.fromCircle(center: center, radius: radius),
startAngle,
sweepAngle,
false,
progressPaint,
);
}
@override
bool shouldRepaint(_ProgressRingPainter oldDelegate) =>
oldDelegate.progress != progress;
}
class _PulseRingsPainter extends CustomPainter {
final double progress;
_PulseRingsPainter({required this.progress});
@override
void paint(Canvas canvas, Size size) {
final center = size.center(Offset.zero);
final baseRadius = 60.0; // start at grey circle
final maxRadius = 130.0; // outermost ripple
final ringPhases = [0.0, 0.25, 0.5];
for (final phase in ringPhases) {
final ringProgress = (progress - phase).clamp(0.0, 1.0);
if (ringProgress > 0) {
final radius = baseRadius + (maxRadius - baseRadius) * ringProgress;
final opacity = (1.0 - ringProgress) * 0.45;
final paint = Paint()
..color = const Color(0xFF32C59A).withOpacity(opacity)
..style = PaintingStyle.stroke
..strokeWidth = 2;
canvas.drawCircle(center, radius, paint);
}
}
}
@override
bool shouldRepaint(_PulseRingsPainter oldDelegate) =>
oldDelegate.progress != progress;
}

103
lib/widgets/settings_bar.dart
View File

@@ -12,7 +12,7 @@ class SettingsBar extends StatelessWidget {
super.key,
required this.selectedIndex,
required this.onTap,
this.showBackButton = false,
this.showBackButton = false, //to swicth between back button and settings icons
this.onBackTap,
required this.iconPaths,
});
@@ -21,24 +21,18 @@ class SettingsBar extends StatelessWidget {
Widget build(BuildContext context) {
return Container(
color: Colors.transparent,
padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 10.0),
padding: const EdgeInsets.symmetric(horizontal: 20.0, vertical: 20.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
Image.asset(
'assets/images/logo2.png',
width: 150,
height: 40,
),
Image.asset('assets/images/logo2.png', width: 150, height: 40),
],
),
// Navigation icons on the right
Row(
children: [
// Back button (only shown when showBackButton is true)
if (showBackButton)
GestureDetector(
onTap: onBackTap,
@@ -56,71 +50,56 @@ class SettingsBar extends StatelessWidget {
),
],
),
child: const Center(
child: Icon(
Icons.arrow_back,
color: Color(0xFF006838),
child: Center(
child: SvgPicture.asset(
"assets/images/back.svg",
width: 26,
height: 26,
),
),
),
),
// Add spacing if back button is shown
if (showBackButton) const SizedBox(width: 20),
// Settings and notification icons
...iconPaths.asMap().entries.map((entry) {
final index = entry.key;
final iconPath = entry.value;
final isSelected = selectedIndex == index;
return Padding(
padding: const EdgeInsets.only(left: 10),
child: GestureDetector(
onTap: () => onTap(index),
child: Container(
width: 43,
height: 43,
decoration: BoxDecoration(
color: Colors.white,
shape: BoxShape.circle,
boxShadow: [
BoxShadow(
color: const Color(0x10000000),
blurRadius: 5,
offset: const Offset(0, 2),
),
],
),
child: Center(
child: Stack(
children: [
SvgPicture.asset(
iconPath,
width: 30,
height: 30,
// When back button is OFF → show user + settings icons
if (!showBackButton)
...iconPaths.asMap().entries.map((entry) {
final index = entry.key;
final iconPath = entry.value;
// final isSelected = selectedIndex == index;
return Padding(
padding: const EdgeInsets.only(left: 10),
child: GestureDetector(
onTap: () => onTap(index),
child: Container(
width: 43,
height: 43,
decoration: BoxDecoration(
color: Colors.white,
shape: BoxShape.circle,
boxShadow: [
BoxShadow(
color: const Color(0x10000000),
blurRadius: 5,
offset: const Offset(0, 2),
),
if (index == 1)
Positioned(
top: 0,
right: 0,
child: Container(
width: 10,
height: 10,
),
),
],
),
child: Center(
child: Stack(
children: [
SvgPicture.asset(iconPath, width: 30, height: 30),
],
),
),
),
),
),
);
}).toList(),
);
}),
],
),
],
),
);
}
}
}