chnages were made for the attandence screen
This commit is contained in:
Daniah Ayad Al-sultani
354
lib/widgets/login_animation_screen.dart
Normal file
354
lib/widgets/login_animation_screen.dart
Normal file
@@ -0,0 +1,354 @@
|
||||
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();
|
||||
}
|
||||
|
||||
@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,
|
||||
),
|
||||
),
|
||||
AnimatedSwitcher(
|
||||
duration: const Duration(milliseconds: 500),
|
||||
child: _buildIcon(
|
||||
showResult,
|
||||
widget.isSuccess,
|
||||
key: ValueKey(
|
||||
"icon_${showResult}_${widget.isSuccess}",
|
||||
),
|
||||
),
|
||||
),
|
||||
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),
|
||||
|
||||
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,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
/// >>> FIXED ICON BUILDER <<<
|
||||
Widget _buildIcon(bool showResult, bool isSuccess, {required Key key}) {
|
||||
if (showResult) {
|
||||
if (isSuccess) {
|
||||
return SizedBox(
|
||||
key: key,
|
||||
width: 70,
|
||||
height: 70,
|
||||
child: SvgPicture.asset(
|
||||
"assets/images/tick.svg",
|
||||
width: 70,
|
||||
height: 70,
|
||||
placeholderBuilder:
|
||||
(context) => Icon(
|
||||
Icons.check_circle,
|
||||
size: 70,
|
||||
color: const Color(0xFF32C59A),
|
||||
),
|
||||
),
|
||||
);
|
||||
} else {
|
||||
return SizedBox(
|
||||
key: key,
|
||||
width: 70,
|
||||
height: 70,
|
||||
child: SvgPicture.asset(
|
||||
"assets/images/error.svg",
|
||||
width: 70,
|
||||
height: 70,
|
||||
placeholderBuilder:
|
||||
(context) => Icon(Icons.error, size: 70, color: Colors.red),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return SizedBox(
|
||||
key: key,
|
||||
width: 70,
|
||||
height: 70,
|
||||
child: SvgPicture.asset(
|
||||
"assets/images/finger_print.svg",
|
||||
width: 70,
|
||||
height: 70,
|
||||
placeholderBuilder:
|
||||
(context) => Icon(
|
||||
Icons.fingerprint,
|
||||
size: 70,
|
||||
color: const Color(0xFF102D25),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
Reference in New Issue
Block a user