feat(UX-1247): extend ZetaProgressCircle (#199)

feat: Added label prop to progress circle which overrides default percentage label

feat: added maxValue to progress circle

example/widgetbook/pages/components/progress_widgetbook.dart

@@ -25,13 +25,15 @@ Widget progressBarUseCase(BuildContext context) => WidgetbookScaffold(
 
 Widget progressCircleUseCase(BuildContext context) => WidgetbookScaffold(
       builder: (context, _) => ZetaProgressCircle(
-        progress: context.knobs.double.slider(label: 'Progress', min: 0, max: 1, initialValue: 0.5).toDouble(),
+        progress: context.knobs.double.input(label: 'Progress', initialValue: 0.5),
         size: context.knobs.list(
           initialOption: ZetaCircleSizes.xl,
           label: 'Size',
           options: ZetaCircleSizes.values,
           labelBuilder: enumLabelBuilder,
         ),
         onCancel: context.knobs.boolean(label: "Can Cancel") ? () {} : null,
+        label: context.knobs.stringOrNull(label: 'Label'),
+        maxValue: context.knobs.double.input(label: 'Max Value', initialValue: 1),
       ),
     );

lib/src/components/progress/progress.dart

@@ -10,14 +10,21 @@ abstract class ZetaProgress extends ZetaStatefulWidget {
     super.key,
     super.rounded,
     this.progress = 0,
+    this.maxValue = 1,
   });
 
   /// ZetaProgress value, decimal value ranging from 0.0 - 1.0, 0.5 = 50%
   final double progress;
+
+  /// Maximum value for progress, defaults to 1
+  final double maxValue;
+
   @override
   void debugFillProperties(DiagnosticPropertiesBuilder properties) {
     super.debugFillProperties(properties);
-    properties.add(DoubleProperty('progress', progress));
+    properties
+      ..add(DoubleProperty('progress', progress))
+      ..add(DoubleProperty('maxValue', maxValue));
   }
 }
 
@@ -48,7 +55,7 @@ abstract class ZetaProgressState<T extends ZetaProgress> extends State<T> with T
     ).animate(controller)
       ..addListener(() {
         setState(() {
-          progress = animation.value;
+          progress = animation.value / widget.maxValue;
         });
       });
   }
@@ -65,10 +72,12 @@ abstract class ZetaProgressState<T extends ZetaProgress> extends State<T> with T
 
     setState(() {
       animation = Tween<double>(
-        begin: progress,
+        begin: progress * widget.maxValue,
         end: newProgress,
       ).animate(controller);
-      controller.forward(from: progress);
+      controller
+        ..reset()
+        ..forward(from: 0);
     });
   }
 

lib/src/components/progress/progress_circle.dart

@@ -34,9 +34,11 @@ class ZetaProgressCircle extends ZetaProgress {
   const ZetaProgressCircle({
     super.key,
     super.progress = 0,
+    super.maxValue = 1,
     this.size = ZetaCircleSizes.xl,
     super.rounded,
     this.onCancel,
+    this.label,
   });
 
   ///Size of [ZetaProgressCircle]
@@ -45,6 +47,9 @@ class ZetaProgressCircle extends ZetaProgress {
   /// Cancel function => cancel upload.
   final VoidCallback? onCancel;
 
+  /// Label for [ZetaProgressCircle], override default percentage label.
+  final String? label;
+
   @override
   State<ZetaProgressCircle> createState() => _ZetaProgressCircleState();
 
@@ -55,7 +60,9 @@ class ZetaProgressCircle extends ZetaProgress {
       ..add(EnumProperty<ZetaCircleSizes>('size', size))
       ..add(DoubleProperty('progress', progress))
       ..add(DiagnosticsProperty<bool>('rounded', rounded))
-      ..add(ObjectFlagProperty<VoidCallback?>.has('onCancel', onCancel));
+      ..add(ObjectFlagProperty<VoidCallback?>.has('onCancel', onCancel))
+      ..add(DoubleProperty('maxValue', maxValue))
+      ..add(StringProperty('label', label));
   }
 }
 
@@ -85,13 +92,11 @@ class _ZetaProgressCircleState extends ZetaProgressState<ZetaProgressCircle> {
 
   @override
   Widget build(BuildContext context) {
-    final textVal = '${(widget.progress * 100).round()}%';
+    final textVal = widget.label ?? '${(widget.progress * 100).round()}%';
     final colors = Zeta.of(context).colors;
     final textWidget = Text(
       textVal,
-      style: widget.size != ZetaCircleSizes.s
-          ? ZetaTextStyles.labelSmall
-          : ZetaTextStyles.labelSmall.copyWith(fontSize: Zeta.of(context).spacing.small),
+      style: _getTextSize(),
     );
 
     return ConstrainedBox(
@@ -105,6 +110,7 @@ class _ZetaProgressCircleState extends ZetaProgressState<ZetaProgressCircle> {
               progress: animation.value,
               rounded: context.rounded,
               context: context,
+              maxValue: widget.maxValue,
             ),
             child: Center(
               child: widget.size == ZetaCircleSizes.xs
@@ -168,6 +174,19 @@ class _ZetaProgressCircleState extends ZetaProgressState<ZetaProgressCircle> {
     }
   }
 
+  TextStyle _getTextSize() {
+    switch (widget.size) {
+      case ZetaCircleSizes.xs:
+      case ZetaCircleSizes.s:
+        return ZetaTextStyles.labelSmall;
+      case ZetaCircleSizes.m:
+        return ZetaTextStyles.labelMedium;
+      case ZetaCircleSizes.l:
+      case ZetaCircleSizes.xl:
+        return ZetaTextStyles.labelLarge;
+    }
+  }
+
   @override
   void debugFillProperties(DiagnosticPropertiesBuilder properties) {
     super.debugFillProperties(properties);
@@ -185,7 +204,12 @@ typedef CirclePainter = _CirclePainter;
 /// Class definition for [_CirclePainter]
 class _CirclePainter extends CustomPainter {
   ///Constructor for [_CirclePainter]
-  _CirclePainter({this.progress = 0, this.rounded = true, required this.context});
+  _CirclePainter({
+    this.progress = 0,
+    this.rounded = true,
+    required this.context,
+    this.maxValue = 1,
+  });
 
   ///Percentage of progress in decimal value, defaults to 0
   final double progress;
@@ -195,6 +219,9 @@ class _CirclePainter extends CustomPainter {
 
   final BuildContext context;
 
+  /// Maximum value for progress, defaults to 1
+  final double maxValue;
+
   final _paint = Paint();
 
   @override
@@ -210,7 +237,7 @@ class _CirclePainter extends CustomPainter {
     canvas.drawArc(
       Rect.fromLTRB(0, 0, size.width, size.height),
       3 * math.pi / 2,
-      progress * fullCircle,
+      progress / maxValue * fullCircle,
       false,
       _paint,
     );