login agnimation has been fixed + request holiday screen was created
This commit is contained in:
Daniah Ayad Al-sultani
486
lib/widgets/login_animation.dart
Normal file
486
lib/widgets/login_animation.dart
Normal 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;
|
||||
}
|
||||
Reference in New Issue
Block a user