added some images + some fixes to the login_animation screen

2025-12-03 15:59:23 +03:00
parent 4123e43417
commit f6dacd9a1a
7 changed files with 144 additions and 125 deletions
--- a/assets/images/money.svg
+++ b/assets/images/money.svg
@@ -0,0 +1,3 @@
+<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M24.9103 5.01331L17.5035 9.7675L18.2543 10.1786L24.8439 5.94877L36.021 12.2799L29.61 16.3949L29.9223 16.5658V17.0875L34.9438 13.8642L35.9977 14.4612L29.9222 18.3608V19.2538L34.8454 16.0936L35.9977 16.7464L29.9222 20.6461V21.539L34.8454 18.3789L35.9977 19.0317L29.9222 22.9313V23.8243L37.5419 18.9333L35.6507 17.8621L37.5418 16.6482L35.6507 15.5769L37.5418 14.3629L35.7489 13.3473L37.565 12.1815L24.9103 5.01331ZM27.2767 8.42124C25.6742 9.22531 23.5397 9.36135 22.0368 8.7551L19.0989 10.6409L28.7653 15.9325L31.5518 14.144C30.4542 13.2775 30.5456 11.9846 31.7759 10.9699L27.2767 8.42124ZM17.3294 11.2353L11.945 14.7464L22.2746 20.6928L22.376 20.6281C22.5664 20.5054 22.8353 20.3318 23.1561 20.1244C23.7975 19.7098 24.6463 19.16 25.4926 18.6116C26.7115 17.8217 27.3396 17.4142 27.9237 17.0353L17.3294 11.2353ZM26.1248 11.3245H26.125C26.3686 11.3259 26.5919 11.3782 26.7587 11.4726C26.8558 11.5276 26.9311 11.5954 26.9803 11.6721C27.0295 11.7489 27.0517 11.8331 27.0455 11.92C27.0394 12.0069 27.005 12.0947 26.9444 12.1785C26.8839 12.2622 26.7982 12.3403 26.6925 12.4081C26.5867 12.476 26.4629 12.5324 26.3281 12.5741C26.1932 12.6158 26.05 12.6419 25.9066 12.651C25.7632 12.6602 25.6224 12.6521 25.4923 12.6273C25.3622 12.6024 25.2453 12.5614 25.1482 12.5064C24.9523 12.3954 24.8491 12.2345 24.8616 12.0591C24.874 11.8836 25.0009 11.7081 25.2145 11.571C25.3358 11.4932 25.4806 11.4305 25.6382 11.3878C25.7959 11.3452 25.9622 11.3235 26.1248 11.3245ZM9.48706 14.9133L1.45817 20.0667L3.25103 21.0823L1.43494 22.2481L3.32613 23.3193L1.43494 24.5333L3.32613 25.6045L1.43494 26.8186L14.0898 33.9868L21.7301 29.0824V28.1897L14.1561 33.0513L2.97909 26.7201L4.06492 26.0231L14.0898 31.7015L21.7301 26.7972V25.9045L14.1561 30.7661L2.97909 24.4349L4.06492 23.738L14.0898 29.4163L21.7301 24.5121V23.6194L14.1561 28.4809L2.97909 22.1498L3.98989 21.5008L14.1131 27.235L21.7301 22.3457V21.961L21.3127 21.7208L14.1792 26.2995L3.00248 19.9684L10.2205 15.3353L9.48699 14.9131L9.48706 14.9133ZM11.0455 15.8106L7.47156 18.1045C8.56919 18.9709 8.47779 20.2638 7.24746 21.2786L11.7468 23.8273C13.3492 23.0232 15.4835 22.8872 16.9864 23.4934L20.4877 21.246L11.0454 15.8105L11.0455 15.8106ZM28.5511 18.2626C27.9384 18.66 27.398 19.0107 26.2383 19.7622C25.4593 20.2672 24.6801 20.7718 23.9006 21.276C23.5794 21.4836 23.3099 21.6576 23.1177 21.7812C23.1109 21.7857 23.108 21.7873 23.1013 21.7916V28.3366L28.5512 24.6736L28.5511 18.2626ZM13.2413 19.594C13.485 19.5956 13.7083 19.6478 13.8751 19.7424C14.0711 19.8534 14.1742 20.0143 14.1618 20.1897C14.1493 20.3651 14.0224 20.5407 13.8088 20.6777C13.5953 20.8148 13.3127 20.9021 13.0231 20.9206C12.7336 20.939 12.4608 20.887 12.2648 20.776C12.0689 20.665 11.9657 20.5041 11.9782 20.3287C11.9906 20.1532 12.1175 19.9777 12.3311 19.8406C12.4524 19.7628 12.5972 19.7002 12.7548 19.6575C12.9125 19.6148 13.0788 19.5931 13.2413 19.5941V19.594Z" fill="#008864"/>
+</svg>
--- a/assets/images/no.svg
+++ b/assets/images/no.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.5 1.5L10.5 10.5M10.5 1.5L1.5 10.5" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/assets/images/plus.svg
+++ b/assets/images/plus.svg
@@ -0,0 +1,3 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 0C14.6552 0 15.2836 0.260293 15.747 0.723619C16.2103 1.18694 16.4706 1.81535 16.4706 2.47059V11.5294H25.5294C26.1847 11.5294 26.8131 11.7897 27.2764 12.253C27.7397 12.7164 28 13.3448 28 14C28 14.6552 27.7397 15.2836 27.2764 15.747C26.8131 16.2103 26.1847 16.4706 25.5294 16.4706H16.4706V25.5294C16.4706 26.1847 16.2103 26.8131 15.747 27.2764C15.2836 27.7397 14.6552 28 14 28C13.3448 28 12.7164 27.7397 12.253 27.2764C11.7897 26.8131 11.5294 26.1847 11.5294 25.5294V16.4706H2.47059C1.81535 16.4706 1.18694 16.2103 0.723619 15.747C0.260293 15.2836 0 14.6552 0 14C0 13.3448 0.260293 12.7164 0.723619 12.253C1.18694 11.7897 1.81535 11.5294 2.47059 11.5294H11.5294V2.47059C11.5294 1.81535 11.7897 1.18694 12.253 0.723619C12.7164 0.260293 13.3448 0 14 0Z" fill="#008864"/>
+</svg>
--- a/assets/images/timer.svg
+++ b/assets/images/timer.svg
@@ -0,0 +1,3 @@
+<svg width="11" height="12" viewBox="0 0 11 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.56497 0L4.11835 0.827619L10.0663 4.0374L10.5129 3.20978L4.56497 0ZM3.96132 1.40642L0.843763 7.18347L1.35768 7.4608L4.47522 1.68378L3.96132 1.40642ZM5.03731 1.98707C4.13916 3.69732 4.30259 5.01498 4.94895 5.62581C4.07219 5.41811 2.86088 6.02237 1.91887 7.76357L5.44418 9.66599C6.38258 7.92273 6.22374 6.57951 5.56951 5.9607C6.43453 6.16522 7.62423 5.57817 8.56087 3.88858L5.03731 1.98707ZM9.10571 4.18257L5.98815 9.95961L6.50209 10.237L9.61964 4.45994L9.10571 4.18257ZM0.446171 7.63241L1.05393e-05 8.45918L5.94795 11.669L6.39411 10.8422L0.446171 7.63241Z" fill="white"/>
+</svg>
--- a/assets/images/yes.svg
+++ b/assets/images/yes.svg
@@ -0,0 +1,3 @@
+<svg width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.6785 4L20 5.61373L9.93455 20H7.61309L2 12.206L4.32146 10.0601L8.77382 14.1803L17.6785 4Z" fill="white"/>
+</svg>
--- a/lib/screens/attendence_screen.dart
+++ b/lib/screens/attendence_screen.dart
@@ -105,10 +105,11 @@ class AttendanceScreen extends StatelessWidget {
                  // Navigate to LoginAnimationScreen with success state
                  Navigator.of(context).push(
                    MaterialPageRoute(
-                      builder: (context) => LoginAnimationScreen(
-                        isLogin: true,
-                        isSuccess: true, // Set to true for success, false for error
-                      ),
+                      builder:
+                          (context) => LoginAnimationScreen(
+                            isLogin: true,
+                            isSuccess: true,
+                          ),
                    ),
                  );
                },
@@ -124,24 +125,24 @@ class AttendanceScreen extends StatelessWidget {
              shadow: const [
                // Strong BLACK shadow bottom-right
                BoxShadow(
-                          color: Color(0xABCECECE),
-                          blurRadius: 5,
-                          spreadRadius: 3,
-                          offset: Offset(-6, -6),
-                        ),
+                  color: Color(0xABCECECE),
+                  blurRadius: 5,
+                  spreadRadius: 3,
+                  offset: Offset(-6, -6),
+                ),

-                        // LIGHT GLOBAL GLOW
-                        BoxShadow(
-                          color: Color(0x92014221),
-                          blurRadius: 10,
-                          offset:  Offset(-5, -5),
-                        ),
-                          BoxShadow(
-                          color: Color(0x7D1A1A1A),
-                          blurRadius: 10,
-                          spreadRadius: 3,
-                          offset: Offset(5, 5),
-                        ),
+                // LIGHT GLOBAL GLOW
+                BoxShadow(
+                  color: Color(0x92014221),
+                  blurRadius: 10,
+                  offset: Offset(-5, -5),
+                ),
+                BoxShadow(
+                  color: Color(0x7D1A1A1A),
+                  blurRadius: 10,
+                  spreadRadius: 3,
+                  offset: Offset(5, 5),
+                ),
              ],
              child: _FingerButton(
                icon: "assets/images/logout.svg",
@@ -150,10 +151,11 @@ class AttendanceScreen extends StatelessWidget {
                  // Navigate to LoginAnimationScreen with success state
                  Navigator.of(context).push(
                    MaterialPageRoute(
-                      builder: (context) => LoginAnimationScreen(
-                        isLogin: false,
-                        isSuccess: true, // Set to true for success, false for error
-                      ),
+                      builder:
+                          (context) => LoginAnimationScreen(
+                            isLogin: true,
+                            isSuccess: false,
+                          ),
                    ),
                  );
                },
@@ -200,7 +202,7 @@ class _FingerButton extends StatelessWidget {
  final VoidCallback onTap; // Added onTap callback

  const _FingerButton({
-    required this.icon, 
+    required this.icon,
    required this.label,
    required this.onTap, // Added this parameter
  });
@@ -234,4 +236,4 @@ class _FingerButton extends StatelessWidget {
      ),
    );
  }
-}
+}
--- a/lib/widgets/login_animation_screen.dart
+++ b/lib/widgets/login_animation_screen.dart
@@ -87,6 +87,50 @@ class _LoginAnimationScreenState extends State<LoginAnimationScreen>
    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 SvgPicture.asset(
+        "assets/images/tick.svg",
+        key: const ValueKey('success'),
+        width: 70,
+        height: 70,
+        placeholderBuilder: (context) => Icon(
+          Icons.check_circle,
+          size: 70,
+          color: const Color(0xFF32C59A),
+        ),
+      );
+    } else {
+      // Error state - error icon
+      return SvgPicture.asset(
+        "assets/images/error.svg",
+        key: const ValueKey('error'),
+        width: 70,
+        height: 70,
+        placeholderBuilder: (context) => Icon(
+          Icons.error,
+          size: 70,
+          color: Colors.red,
+        ),
+      );
+    }
+  }
+
  @override
  Widget build(BuildContext context) {
    return Scaffold(
@@ -138,16 +182,31 @@ class _LoginAnimationScreenState extends State<LoginAnimationScreen>
                              shape: BoxShape.circle,
                            ),
                          ),
+                          
+                          // FIXED: AnimatedSwitcher with proper key handling
                          AnimatedSwitcher(
                            duration: const Duration(milliseconds: 500),
-                            child: _buildIcon(
-                              showResult,
-                              widget.isSuccess,
-                              key: ValueKey(
-                                "icon_${showResult}_${widget.isSuccess}",
-                              ),
-                            ),
+                            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(
@@ -181,29 +240,29 @@ class _LoginAnimationScreenState extends State<LoginAnimationScreen>

                    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,
-                                ),
+                      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,
+                              ),
+                            ),
                    ),
                  ],
                ),
@@ -214,60 +273,6 @@ class _LoginAnimationScreenState extends State<LoginAnimationScreen>
      ),
    );
  }
-
-  /// >>> 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 {
@@ -283,21 +288,19 @@ class _ProgressRingPainter extends CustomPainter {
    final radius = 50.0;

    // background circle (very subtle)
-    final bgPaint =
-        Paint()
-          ..color = const Color(0x0032C599)
-          ..style = PaintingStyle.stroke
-          ..strokeWidth = 3.0;
+    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;
+    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;
@@ -337,11 +340,10 @@ class _PulseRingsPainter extends CustomPainter {
        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;
+        final paint = Paint()
+          ..color = const Color(0xFF32C59A).withOpacity(opacity)
+          ..style = PaintingStyle.stroke
+          ..strokeWidth = 2;

        canvas.drawCircle(center, radius, paint);
      }
@@ -351,4 +353,4 @@ class _PulseRingsPainter extends CustomPainter {
  @override
  bool shouldRepaint(_PulseRingsPainter oldDelegate) =>
      oldDelegate.progress != progress;
-}
+}