feat : Progress Circle (ZebraDevs#31)

Authored-by: Osman <[email protected]>

Author: ahmed-osman3

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,32 @@ 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: 
+           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),
+          ),
+    );