diff --git a/example/widgetbook/pages/components/progress_widgetbook.dart b/example/widgetbook/pages/components/progress_widgetbook.dart index 249b5896..357ccfce 100644 --- a/example/widgetbook/pages/components/progress_widgetbook.dart +++ b/example/widgetbook/pages/components/progress_widgetbook.dart @@ -25,7 +25,7 @@ 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', @@ -33,5 +33,7 @@ Widget progressCircleUseCase(BuildContext context) => WidgetbookScaffold( 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), ), ); diff --git a/lib/src/components/progress/progress.dart b/lib/src/components/progress/progress.dart index 0ffa2f14..42bb92a0 100644 --- a/lib/src/components/progress/progress.dart +++ b/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 extends State with T ).animate(controller) ..addListener(() { setState(() { - progress = animation.value; + progress = animation.value / widget.maxValue; }); }); } @@ -65,10 +72,12 @@ abstract class ZetaProgressState extends State with T setState(() { animation = Tween( - begin: progress, + begin: progress * widget.maxValue, end: newProgress, ).animate(controller); - controller.forward(from: progress); + controller + ..reset() + ..forward(from: 0); }); } diff --git a/lib/src/components/progress/progress_circle.dart b/lib/src/components/progress/progress_circle.dart index 2538aafa..6847e401 100644 --- a/lib/src/components/progress/progress_circle.dart +++ b/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 createState() => _ZetaProgressCircleState(); @@ -55,7 +60,9 @@ class ZetaProgressCircle extends ZetaProgress { ..add(EnumProperty('size', size)) ..add(DoubleProperty('progress', progress)) ..add(DiagnosticsProperty('rounded', rounded)) - ..add(ObjectFlagProperty.has('onCancel', onCancel)); + ..add(ObjectFlagProperty.has('onCancel', onCancel)) + ..add(DoubleProperty('maxValue', maxValue)) + ..add(StringProperty('label', label)); } } @@ -85,13 +92,11 @@ class _ZetaProgressCircleState extends ZetaProgressState { @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 { 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 { } } + 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, );