Handle state outside

ZebraDevs · Feb 26, 2024 · eced140 · eced140
1 parent 675ab6d
commit eced140
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 10 deletions.
diff --git a/example/lib/pages/components/progress_example.dart b/example/lib/pages/components/progress_example.dart
@@ -13,11 +13,21 @@ class ProgressExample extends StatefulWidget {
 
 class ProgressExampleState extends State<ProgressExample> {
   GlobalKey key = GlobalKey();
+  int stepsCompleted = 0;
+  late double progress;
+
+  @override
+  void initState() {
+    super.initState();
+    progress = stepsCompleted / 10;
+  }
 
   ///Function to increase percentage of progress.
   void increasePercentage() {
-    final circle = key.currentState as ProgressCircleState;
-    circle.increasePercentage(circle.progress + 0.1);
+    setState(() {
+      stepsCompleted++;
+      progress = stepsCompleted / 10;
+    });
   }
 
   @override
@@ -33,7 +43,7 @@ class ProgressExampleState extends State<ProgressExample> {
               mainAxisAlignment: MainAxisAlignment.spaceEvenly,
               children: [
                 ProgressCircle(
-                  progress: 0,
+                  progress: progress,
                   key: key,
                   size: CircleSizes.xl,
                   border: ZetaWidgetBorder.sharp,

diff --git a/lib/src/components/progress/progress_circle.dart b/lib/src/components/progress/progress_circle.dart
@@ -1,6 +1,7 @@
 import 'dart:math' as math;
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter/widgets.dart';
 
 import '../../../zeta_flutter.dart';
 
@@ -65,10 +66,12 @@ class ProgressCircleState extends State<ProgressCircle>
 
   ///Animation for [ProgressCircleState]
   late Animation<double> animation;
+  late final ValueNotifier<double> _counter;
 
   @override
   void initState() {
     super.initState();
+    _counter = ValueNotifier<double>(widget.progress);
     progress = widget.progress;
     controller = AnimationController(
         vsync: this, duration: const Duration(milliseconds: 200));
@@ -91,13 +94,23 @@ class ProgressCircleState extends State<ProgressCircle>
 
   ///Increase the progress percentage and animate to new progress percentage.
   void increasePercentage(double newProgress) {
-    // Update the Tween with new start and end values
-    animation = Tween<double>(
-      begin: progress,
-      end: newProgress,
-    ).animate(controller);
-    controller.forward(
-        from: progress); // Start the animation from the beginning
+    // Update the Tween with new start and end value
+
+    setState(() {
+      animation = Tween<double>(
+        begin: progress,
+        end: newProgress,
+      ).animate(controller);
+      controller.forward(from: progress);
+    });
+  }
+
+  @override
+  void didUpdateWidget(ProgressCircle oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    if (oldWidget.progress != widget.progress) {
+      increasePercentage(widget.progress);
+    }
   }
 
   @override