2026-04-05-maplibra succsess for all and add navigation paage

lib/views/widgets/my_circular_indicator_timer.dart

@@ -1,68 +1,151 @@
-import 'package:flutter/material.dart';
 import 'dart:async';
-
+import 'package:flutter/material.dart';
 import '../../constant/style.dart';
 
-class MyCircularProgressIndicatorWithTimer extends StatelessWidget {
+class MyCircularProgressIndicatorWithTimer extends StatefulWidget {
   final Color backgroundColor;
   final bool isLoading;
 
-  MyCircularProgressIndicatorWithTimer({
+  const MyCircularProgressIndicatorWithTimer({
     Key? key,
-    this.backgroundColor = Colors.transparent,
+    this.backgroundColor = Colors.white,
     required this.isLoading,
   }) : super(key: key);
 
-  final StreamController<int> _streamController = StreamController<int>();
+  @override
+  State<MyCircularProgressIndicatorWithTimer> createState() =>
+      _MyCircularProgressIndicatorWithTimerState();
+}
 
-  void startTimer() {
-    int _timeLeft = 60;
-    Timer.periodic(const Duration(seconds: 1), (timer) {
-      if (_timeLeft > 0 && isLoading) {
-        _streamController.add(_timeLeft);
-        _timeLeft--;
-      } else {
-        timer.cancel();
-        _streamController.close();
-      }
+class _MyCircularProgressIndicatorWithTimerState
+    extends State<MyCircularProgressIndicatorWithTimer> {
+  Timer? _timer;
+  int _timeLeft = 60;
+  bool _isLowTime = false;
+
+  @override
+  void initState() {
+    super.initState();
+    if (widget.isLoading) _startTimer();
+  }
+
+  @override
+  void didUpdateWidget(
+      covariant MyCircularProgressIndicatorWithTimer oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    if (widget.isLoading && !oldWidget.isLoading) {
+      _resetTimer();
+      _startTimer();
+    } else if (!widget.isLoading && oldWidget.isLoading) {
+      _cancelTimer();
+    }
+  }
+
+  void _startTimer() {
+    _cancelTimer(); // Ensure no duplicate timers
+    _timer = Timer.periodic(const Duration(seconds: 1), (_) {
+      if (!mounted) return;
+      setState(() {
+        if (_timeLeft > 0) {
+          _timeLeft--;
+          _isLowTime = _timeLeft <= 10;
+        } else {
+          _cancelTimer();
+        }
+      });
     });
   }
 
+  void _resetTimer() {
+    _cancelTimer();
+    setState(() {
+      _timeLeft = 60;
+      _isLowTime = false;
+    });
+  }
+
+  void _cancelTimer() {
+    _timer?.cancel();
+    _timer = null;
+  }
+
+  @override
+  void dispose() {
+    _cancelTimer();
+    super.dispose();
+  }
+
   @override
   Widget build(BuildContext context) {
-    if (isLoading) {
-      startTimer();
-    }
+    if (!widget.isLoading) return const SizedBox.shrink();
+
+    final progress = _timeLeft / 60.0;
+    final timerColor = _isLowTime ? Colors.orangeAccent : Colors.blueAccent;
 
     return Center(
       child: Container(
         width: 200,
         height: 200,
         decoration: BoxDecoration(
-          color: backgroundColor,
+          color: widget.backgroundColor == Colors.transparent
+              ? Colors.white.withOpacity(0.96)
+              : widget.backgroundColor,
           shape: BoxShape.circle,
+          boxShadow: [
+            BoxShadow(
+              color: Colors.black.withOpacity(0.08),
+              blurRadius: 24,
+              spreadRadius: 2,
+              offset: const Offset(0, 8),
+            ),
+          ],
         ),
         child: Stack(
+          alignment: Alignment.center,
           children: [
-            const Center(child: CircularProgressIndicator()),
+            // Elegant circular progress ring
+            SizedBox(
+              width: 184,
+              height: 184,
+              child: CircularProgressIndicator(
+                value: progress,
+                strokeWidth: 6,
+                backgroundColor: Colors.grey.shade100,
+                valueColor: AlwaysStoppedAnimation<Color>(timerColor),
+                strokeCap: StrokeCap.round,
+              ),
+            ),
+            // Center content
             Column(
-              mainAxisAlignment: MainAxisAlignment.center,
+              mainAxisSize: MainAxisSize.min,
               children: [
-                Align(
-                  alignment: Alignment.center,
+                // Subtle scale animation when time is low
+                AnimatedContainer(
+                  duration: const Duration(milliseconds: 400),
+                  curve: Curves.easeOutCubic,
+                  transform: Matrix4.identity()..scale(_isLowTime ? 1.08 : 1.0),
                   child: Image.asset(
                     'assets/images/logo.gif',
-                    width: 140,
-                    height: 140,
+                    width: 96,
+                    height: 96,
+                    fit: BoxFit.contain,
                   ),
                 ),
-                const SizedBox(height: 10),
-                StreamBuilder<int>(
-                  stream: _streamController.stream,
-                  initialData: 60,
-                  builder: (context, snapshot) {
-                    return Text('${snapshot.data}', style: AppStyle.title);
-                  },
+                const SizedBox(height: 14),
+                // Clean, modern timer text
+                AnimatedDefaultTextStyle(
+                  duration: const Duration(milliseconds: 300),
+                  curve: Curves.easeOut,
+                  style: TextStyle(
+                    fontSize: 22,
+                    fontWeight: FontWeight.w600,
+                    color: _isLowTime
+                        ? Colors.orangeAccent
+                        : Colors.blueGrey.shade800,
+                    letterSpacing: 1.2,
+                    fontFeatures: const [FontFeature.tabularFigures()],
+                  ),
+                  child: Text('${_timeLeft}s'),
                 ),
               ],
             ),