feat : Progress Circle

example/lib/home.dart

@@ -13,7 +13,6 @@ import 'package:zeta_example/pages/components/navigation_bar_example.dart';
 import 'package:zeta_example/pages/theme/color_example.dart';
 import 'package:zeta_example/pages/components/password_input_example.dart';
 import 'package:zeta_example/pages/components/progress_example.dart';
-
 import 'package:zeta_example/pages/assets/icons_example.dart';
 import 'package:zeta_example/widgets.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';

example/lib/pages/components/progress_example.dart

@@ -28,7 +28,11 @@ class ProgressExampleState extends State<ProgressExample> {
               SizedBox(
                 height: 20,
               ),
-              Wrapper(stepsCompleted: 0, type: ZetaProgressBarType.standard, isThin: false, stateChangeable: true),
+              Wrapper(
+                  stepsCompleted: 0,
+                  type: ZetaProgressBarType.standard,
+                  isThin: false,
+                  stateChangeable: true),
               SizedBox(
                 height: 20,
               ),
@@ -38,6 +42,12 @@ class ProgressExampleState extends State<ProgressExample> {
                 isThin: false,
                 label: "UPLOADING ...",
               ),
+              Wrapper(
+                stepsCompleted: 0,
+                circleSize: ZetaCircleSizes.xl,
+                rounded: false,
+                isCircle: true,
+              ),
             ]),
           ),
         ),
@@ -47,21 +57,26 @@ class ProgressExampleState extends State<ProgressExample> {
 }
 
 class Wrapper extends StatefulWidget {
-  const Wrapper(
-      {super.key,
-      required this.stepsCompleted,
-      this.type = ZetaProgressBarType.standard,
-      this.isThin = false,
-      this.rounded = true,
-      this.stateChangeable = false,
-      this.label});
+  const Wrapper({
+    super.key,
+    required this.stepsCompleted,
+    this.type = ZetaProgressBarType.standard,
+    this.isThin = false,
+    this.rounded = true,
+    this.stateChangeable = false,
+    this.label,
+    this.isCircle = false,
+    this.circleSize,
+  });
 
   final int stepsCompleted;
-  final bool rounded;
-  final ZetaProgressBarType type;
-  final bool isThin;
+  final bool? rounded;
+  final ZetaProgressBarType? type;
+  final bool? isThin;
   final String? label;
-  final bool stateChangeable;
+  final bool? stateChangeable;
+  final bool isCircle;
+  final ZetaCircleSizes? circleSize;
 
   @override
   State<Wrapper> createState() => _WrapperState();
@@ -75,7 +90,7 @@ class _WrapperState extends State<Wrapper> {
   @override
   void initState() {
     super.initState();
-    type = widget.type;
+    type = widget.type!;
     stepsCompleted = widget.stepsCompleted;
     progress = stepsCompleted / 10;
   }
@@ -90,7 +105,9 @@ class _WrapperState extends State<Wrapper> {
 
   void setLoading() {
     setState(() {
-      type = type == ZetaProgressBarType.buffering ? ZetaProgressBarType.standard : ZetaProgressBarType.buffering;
+      type = type == ZetaProgressBarType.buffering
+          ? ZetaProgressBarType.standard
+          : ZetaProgressBarType.buffering;
     });
   }
 
@@ -99,20 +116,35 @@ class _WrapperState extends State<Wrapper> {
     return Column(
       // Replace with a Column for vertical
       children: [
-        SizedBox(
-          width: 400,
-          child: ZetaProgressBar(
-              progress: progress, rounded: widget.rounded, type: type, isThin: widget.isThin, label: widget.label),
-        ),
+        widget.isCircle
+            ? Center(
+                child: ZetaProgressCircle(
+                  progress: progress,
+                  size: widget.circleSize!,
+                ),
+              )
+            : SizedBox(
+                width: 400,
+                child: ZetaProgressBar(
+                    progress: progress,
+                    rounded: widget.rounded!,
+                    type: type,
+                    isThin: widget.isThin!,
+                    label: widget.label),
+              ),
         const SizedBox(width: 40),
         Row(
           mainAxisAlignment: MainAxisAlignment.center,
           children: [
             widget.type != ZetaProgressBarType.indeterminate
-                ? FilledButton(onPressed: increasePercentage, child: Text("Increase"))
+                ? FilledButton(
+                    onPressed: increasePercentage, child: Text("Increase"))
                 : Container(),
             const SizedBox(width: 40),
-            widget.stateChangeable ? FilledButton(onPressed: setLoading, child: Text("Start Buffering")) : Container()
+            widget.stateChangeable!
+                ? FilledButton(
+                    onPressed: setLoading, child: Text("Start Buffering"))
+                : SizedBox.shrink()
           ],
         )
       ],

example/widgetbook/main.dart

@@ -84,6 +84,7 @@ class HotReload extends StatelessWidget {
               name: 'Progress',
               useCases: [
                 WidgetbookUseCase(name: 'Bar', builder: (context) => progressBarUseCase(context)),
+                WidgetbookUseCase(name : 'Circle', builder : (context) => progressCircleUseCase(context))
               ],
             ),
           ]..sort((a, b) => a.name.compareTo(b.name)),

example/widgetbook/pages/components/progress_widgetbook.dart

@@ -9,13 +9,38 @@ Widget progressBarUseCase(BuildContext context) => WidgetbookTestWidget(
         return SizedBox(
           width: constraints.maxWidth - ZetaSpacing.xl,
           child: ZetaProgressBar(
-            progress: context.knobs.double.slider(label: 'Progress', min: 0, max: 1, initialValue: 0.5).toDouble(),
-            type: context.knobs
-                .list(label: 'Type', options: ZetaProgressBarType.values, labelBuilder: (value) => value.name),
+            progress: context.knobs.double
+                .slider(label: 'Progress', min: 0, max: 1, initialValue: 0.5)
+                .toDouble(),
+            type: context.knobs.list(
+                label: 'Type',
+                options: ZetaProgressBarType.values,
+                labelBuilder: (value) => value.name),
             isThin: context.knobs.boolean(label: 'Thin'),
             rounded: context.knobs.boolean(label: 'Rounded'),
             label: context.knobs.stringOrNull(label: 'Label'),
           ),
         );
       }),
     );
+
+Widget progressCircleUseCase(BuildContext context) =>
+    WidgetbookTestWidget(widget: LayoutBuilder(builder: (context, constraints) {
+      return SizedBox(
+        width: constraints.maxWidth - ZetaSpacing.xl,
+        height: constraints.maxHeight,
+        child: Center(
+          child: ZetaProgressCircle(
+            progress: context.knobs.double
+                .slider(label: 'Progress', min: 0, max: 1, initialValue: 0.5)
+                .toDouble(),
+            rounded: context.knobs.boolean(label: 'Rounded'),
+            size: context.knobs.list(
+                initialOption: ZetaCircleSizes.xl,
+                label: 'Size',
+                options: ZetaCircleSizes.values,
+                labelBuilder: (value) => value.name),
+          ),
+        ),
+      );
+    }));

lib/src/components/progress/progress.dart

@@ -34,9 +34,7 @@ abstract class ZetaProgressState<T extends ZetaProgress> extends State<T> with T
     super.initState();
     progress = widget.progress;
     controller = AnimationController(
-      vsync: this,
-      duration: const Duration(milliseconds: 200),
-    );
+        vsync: this, duration: const Duration(milliseconds: 200),);
     animation = Tween<double>(
       begin: widget.progress, // Start value
       end: widget.progress, // End value (initially same as start value)

lib/src/components/progress/progress_bar.dart

@@ -98,7 +98,8 @@ class _ZetaProgressBarState extends ZetaProgressState<ZetaProgressBar> {
       children: [
         Text(
           widget.label ??
-              (widget.label == null && widget.type != ZetaProgressBarType.indeterminate
+              (widget.label == null &&
+                      widget.type != ZetaProgressBarType.indeterminate
                   ? '${(animation.value * 100).toInt()}%'
                   : ''),
           style: ZetaTextStyles.titleMedium,
@@ -114,21 +115,26 @@ class _ZetaProgressBarState extends ZetaProgressState<ZetaProgressBar> {
                 height: _weight,
                 child: LinearProgressIndicator(
                   borderRadius: _border,
-                  value: widget.type == ZetaProgressBarType.indeterminate ? null : animation.value,
-                  backgroundColor:
-                      widget.type == ZetaProgressBarType.buffering ? colors.surfaceDisabled : Colors.transparent,
+                  value: widget.type == ZetaProgressBarType.indeterminate
+                      ? null
+                      : animation.value,
+                  backgroundColor: widget.type == ZetaProgressBarType.buffering
+                      ? colors.surfaceDisabled
+                      : Colors.transparent,
                 ),
               ),
             ),
-            if (widget.type == ZetaProgressBarType.buffering) bufferingWidget(colors),
+            if (widget.type == ZetaProgressBarType.buffering)
+              bufferingWidget(colors),
           ],
         ),
       ],
     );
   }
 
   /// Returns border based on widgets border type.
-  BorderRadius get _border => widget.rounded ? ZetaRadius.rounded : ZetaRadius.none;
+  BorderRadius get _border =>
+      widget.rounded ? ZetaRadius.rounded : ZetaRadius.none;
 
   /// Returns thickness of progress bar based on its weight.
   double get _weight => widget.isThin ? ZetaSpacing.x2 : ZetaSpacing.x4;
@@ -141,7 +147,10 @@ class _ZetaProgressBarState extends ZetaProgressState<ZetaProgressBar> {
         Container(
           width: _weight,
           height: _weight,
-          decoration: BoxDecoration(color: colors.surfaceDisabled, borderRadius: ZetaRadius.rounded),
+          decoration: BoxDecoration(
+            color: colors.surfaceDisabled,
+            borderRadius: ZetaRadius.rounded,
+          ),
         ),
       ],
     );

lib/src/components/progress/progress_circle.dart

@@ -0,0 +1,131 @@
+import 'dart:math' as math;
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+
+import '../../../zeta_flutter.dart';
+import 'progress.dart';
+
+/// Sizes for [ZetaProgressCircle]
+enum ZetaCircleSizes {
+  ///24 X 24
+  xs,
+
+  /// 36 X 36
+  s,
+
+  /// 40 x 40
+  m,
+
+  /// 48 X 48
+  l,
+
+  /// 64 X 64
+  xl
+}
+
+///Class definition for [ZetaProgressCircle]
+class ZetaProgressCircle extends ZetaProgress {
+  /// Constructor for [ZetaProgressCircle]
+  const ZetaProgressCircle({
+    super.key,
+    super.progress = 0,
+    this.size = ZetaCircleSizes.xl,
+    this.rounded = true,
+  });
+
+  ///Size of [ZetaProgressCircle]
+  final ZetaCircleSizes size;
+
+  /// Border Type for [ZetaWidgetBorder]
+  final bool rounded;
+
+  @override
+  State<ZetaProgressCircle> createState() => ZetaProgressCircleState();
+
+  @override
+  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
+    super.debugFillProperties(properties);
+    properties
+      ..add(EnumProperty<ZetaCircleSizes>('size', size))
+      ..add(DoubleProperty('progress', progress))
+      ..add(DiagnosticsProperty<bool>('rounded', rounded));
+  }
+}
+
+///Class definition for [ZetaProgressCircleState]
+class ZetaProgressCircleState extends ZetaProgressState<ZetaProgressCircle> {
+  @override
+  Widget build(BuildContext context) {
+    return AnimatedBuilder(
+      animation: controller,
+      builder: (context, child) {
+        return CustomPaint(
+          size: _getSize(),
+          painter: CirclePainter(
+            progress: animation.value,
+            rounded: widget.rounded,
+          ),
+        );
+      },
+    );
+  }
+
+  Size _getSize() {
+    switch (widget.size) {
+      case ZetaCircleSizes.xs:
+        return const Size(ZetaSpacing.x6, ZetaSpacing.x6);
+      case ZetaCircleSizes.s:
+        return const Size(ZetaSpacing.x9, ZetaSpacing.x9);
+      case ZetaCircleSizes.m:
+        return const Size(ZetaSpacing.x10, ZetaSpacing.x10);
+      case ZetaCircleSizes.l:
+        return const Size(ZetaSpacing.x12, ZetaSpacing.x12);
+      case ZetaCircleSizes.xl:
+        return const Size(ZetaSpacing.x16, ZetaSpacing.x16);
+    }
+  }
+
+  @override
+  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
+    super.debugFillProperties(properties);
+    properties
+      ..add(DoubleProperty('progress', progress))
+      ..add(DiagnosticsProperty<AnimationController>('controller', controller))
+      ..add(DiagnosticsProperty<Animation<double>>('animation', animation));
+  }
+}
+
+///Class definition for [CirclePainter]
+class CirclePainter extends CustomPainter {
+  ///Constructor for [CirclePainter]
+  CirclePainter({this.progress = 0, this.rounded = true});
+
+  ///Percentage of progress in decimal value, defaults to 0
+  final double progress;
+
+  ///Is circle rounded, defaults to true
+  final bool rounded;
+
+  final _paint = Paint()
+    ..color = Colors.blue
+    ..strokeWidth = 4
+    ..style = PaintingStyle.stroke;
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    if (rounded) _paint.strokeCap = StrokeCap.round;
+
+    const double fullCircle = 2 * math.pi;
+
+    canvas.drawArc(
+      Rect.fromLTRB(0, 0, size.width, size.height),
+      3 * math.pi / 2,
+      progress * fullCircle,
+      false,
+      _paint,
+    );
+  }
+
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) => false;
+}

lib/zeta_flutter.dart

@@ -24,6 +24,7 @@ export 'src/components/dial_pad/dial_pad.dart';
 export 'src/components/navigation bar/navigation_bar.dart';
 export 'src/components/password/password_input.dart';
 export 'src/components/progress/progress_bar.dart';
+export 'src/components/progress/progress_circle.dart';
 export 'src/theme/color_extensions.dart';
 export 'src/theme/color_scheme.dart';
 export 'src/theme/color_swatch.dart';