Merge pull request #13 from TalebRafiepour/12-customizable-step-node-…

…shapes-for-stepnode-widgets

12 customizable step node shapes for stepnode widgets

README.md

@@ -8,7 +8,8 @@
 
 **StepProgress** is a lightweight and highly flexible package designed to display step progress indicators for completing multi-step tasks in a user interface. This package supports both **vertical and horizontal** orientations, allowing developers to customize the display according to their application's needs. It provides a variety of customizable widgets that visually represent the progress of a task, making it easier for users to understand their current position and the steps remaining. With this flexibility, **StepProgress** can seamlessly integrate into various UI designs, enhancing user experience across different platforms.
 
-![StepProgress-without-labels](https://github.com/TalebRafiepour/showcase/blob/main/step_progress/sample-2-step-progress-without-labels.gif?raw=true)
+![StepProgress-horizontal-diamond-shape](https://github.com/TalebRafiepour/showcase/blob/main/step_progress/sample-11-stepprogress-diamond-shape.gif?raw=true)
+
 
 ## Features
 
@@ -42,7 +43,6 @@
 #### Implementation
 
 ```dart
-dart
 StepProgress(
   totalSteps: 4,
   controller: stepProgressController,
@@ -244,6 +244,197 @@ StepProgress(
 ),
 ```
 
+### Example 9: Horizontal Step Progress with Square shape
+![StepProgress-horizontal-square-shape](https://github.com/TalebRafiepour/showcase/blob/main/step_progress/sample-9-stepprogress-square-shape.gif?raw=true)
+
+#### Implementation
+
+```dart
+StepProgress(
+  totalSteps: 4,
+  controller: stepProgressController,
+  titles: const [
+    'Step 1',
+    'Step 2',
+    'Step 3',
+    'Step 4',
+  ],
+  padding: const EdgeInsets.all(18),
+  theme: const StepProgressThemeData(
+    shape: StepNodeShape.square,
+    stepLabelAlignment: StepLabelAlignment.top,
+    stepLineSpacing: 24,
+    stepNodeStyle: StepNodeStyle(
+      decoration: BoxDecoration(
+        borderRadius: BorderRadius.all(
+          Radius.circular(4),
+        ),
+      ),
+      activeDecoration: BoxDecoration(
+        borderRadius: BorderRadius.all(
+          Radius.circular(6),
+        ),
+      ),
+    ),
+    stepLineStyle: StepLineStyle(
+      borderRadius: BorderRadius.all(
+        Radius.circular(4),
+      ),
+    ),
+  ),
+),
+```
+
+### Example 10: Horizontal Step Progress with Triangle shape
+![StepProgress-horizontal-triangle-shape](https://github.com/TalebRafiepour/showcase/blob/main/step_progress/sample-10-stepprogress-triangle-shape.gif?raw=true)
+
+#### Implementation
+
+```dart
+StepProgress(
+  totalSteps: 4,
+  controller: stepProgressController,
+  visibilityOptions: StepProgressVisibilityOptions.nodeOnly,
+  titles: const [
+    'Step 1',
+    'Step 2',
+    'Step 3',
+    'Step 4',
+  ],
+  padding: const EdgeInsets.all(18),
+  theme: const StepProgressThemeData(
+    shape: StepNodeShape.triangle,
+    stepLabelAlignment: StepLabelAlignment.left,
+    stepNodeStyle: StepNodeStyle(
+      activeIcon: null,
+    ),
+  ),
+  ),
+```
+
+### Example 11: Horizontal Step Progress with Diamond shape
+![StepProgress-horizontal-diamond-shape](https://github.com/TalebRafiepour/showcase/blob/main/step_progress/sample-11-stepprogress-diamond-shape.gif?raw=true)
+
+#### Implementation
+
+```dart
+StepProgress(
+  totalSteps: 4,
+  stepSize: 24,
+  controller: stepProgressController,
+  titles: const [
+    'Step 1',
+    'Step 2',
+    'Step 3',
+    'Step 4',
+  ],
+  padding: const EdgeInsets.all(18),
+  theme: const StepProgressThemeData(
+    shape: StepNodeShape.diamond,
+    stepLineSpacing: 18,
+    stepLineStyle: StepLineStyle(
+      borderRadius: BorderRadius.all(
+        Radius.circular(4),
+      ),
+    ),
+    labelStyle: StepLabelStyle(
+      margin: EdgeInsets.only(bottom: 6),
+    ),
+    stepNodeStyle: StepNodeStyle(
+      activeIcon: null,
+      decoration: BoxDecoration(
+        borderRadius: BorderRadius.all(
+          Radius.circular(6),
+        ),
+      ),
+    ),
+  ),
+),
+```
+
+### Example 12: Vertical Step Progress with Hexagon shape
+![StepProgress-vertical-hexagon-shape](https://github.com/TalebRafiepour/showcase/blob/main/step_progress/sample-12-step-progress-vertical-hexagon-shape.gif?raw=true)
+
+#### Implementation
+
+```dart
+StepProgress(
+  totalSteps: 4,
+  stepSize: 24,
+  height: 390,
+  axis: Axis.vertical,
+  controller: stepProgressController,
+  titles: const [
+    'Step 1',
+    'Step 2',
+    'Step 3',
+    'Step 4',
+  ],
+  padding: const EdgeInsets.all(18),
+  theme: const StepProgressThemeData(
+    stepLabelAlignment: StepLabelAlignment.leftRight,
+    shape: StepNodeShape.hexagon,
+    stepLineSpacing: 18,
+    stepLineStyle: StepLineStyle(
+      borderRadius: BorderRadius.all(
+        Radius.circular(4),
+      ),
+    ),
+    stepNodeStyle: StepNodeStyle(
+      decoration: BoxDecoration(
+        borderRadius: BorderRadius.all(
+          Radius.circular(6),
+        ),
+      ),
+    ),
+  ),
+),
+```
+
+### Example 13: Vertical Step Progress with Star shape
+![StepProgress-vertical-star-shape](https://github.com/TalebRafiepour/showcase/blob/main/step_progress/sample-13-stepprogress-vertical-star-shape.gif?raw=true)
+
+#### Implementation
+
+```dart
+StepProgress(
+  totalSteps: 4,
+  stepSize: 28,
+  height: 390,
+  axis: Axis.vertical,
+  controller: stepProgressController,
+  padding: const EdgeInsets.all(18),
+  theme: const StepProgressThemeData(
+    stepLabelAlignment: StepLabelAlignment.left,
+    shape: StepNodeShape.star,
+    stepLineSpacing: 18,
+    stepLineStyle: StepLineStyle(
+      lineThickness: 3,
+      borderRadius: BorderRadius.all(
+        Radius.circular(3),
+      ),
+    ),
+    stepNodeStyle: StepNodeStyle(
+      activeIcon: Icon(
+        Icons.verified_rounded,
+        size: 10,
+        color: Colors.white,
+      ),
+      icon: Icon(
+        Icons.more_horiz_outlined,
+        size: 10,
+        color: Colors.white,
+      ),
+      decoration: BoxDecoration(
+        borderRadius: BorderRadius.all(
+          Radius.circular(6),
+        ),
+      ),
+    ),
+  ),
+),
+```
+
 ## Installation
 
 To use StepProgress, add it to your `pubspec.yaml` file:

example/lib/example_eleven.dart

@@ -0,0 +1,67 @@
+import 'package:flutter/material.dart';
+import 'package:step_progress/step_progress.dart';
+
+class ExampleEleven extends StatelessWidget {
+  const ExampleEleven({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final stepProgressController = StepProgressController(totalSteps: 4);
+    return Scaffold(
+      appBar: AppBar(
+        title: const Text('StepProgress -  diamond shape'),
+      ),
+      body: Column(
+        spacing: 48,
+        children: [
+          StepProgress(
+            totalSteps: 4,
+            stepSize: 24,
+            controller: stepProgressController,
+            titles: const [
+              'Step 1',
+              'Step 2',
+              'Step 3',
+              'Step 4',
+            ],
+            padding: const EdgeInsets.all(18),
+            theme: const StepProgressThemeData(
+              shape: StepNodeShape.diamond,
+              stepLineSpacing: 18,
+              stepLineStyle: StepLineStyle(
+                borderRadius: BorderRadius.all(
+                  Radius.circular(4),
+                ),
+              ),
+              labelStyle: StepLabelStyle(
+                margin: EdgeInsets.only(bottom: 6),
+              ),
+              stepNodeStyle: StepNodeStyle(
+                activeIcon: null,
+                decoration: BoxDecoration(
+                  borderRadius: BorderRadius.all(
+                    Radius.circular(6),
+                  ),
+                ),
+              ),
+            ),
+          ),
+          Row(
+            mainAxisAlignment: MainAxisAlignment.center,
+            spacing: 38,
+            children: [
+              ElevatedButton(
+                onPressed: stepProgressController.previousStep,
+                child: const Text('Prev'),
+              ),
+              ElevatedButton(
+                onPressed: stepProgressController.nextStep,
+                child: const Text('Next'),
+              ),
+            ],
+          ),
+        ],
+      ),
+    );
+  }
+}

example/lib/example_nine.dart

@@ -0,0 +1,68 @@
+import 'package:flutter/material.dart';
+import 'package:step_progress/step_progress.dart';
+
+class ExampleNine extends StatelessWidget {
+  const ExampleNine({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final stepProgressController = StepProgressController(totalSteps: 4);
+    return Scaffold(
+      appBar: AppBar(
+        title: const Text('StepProgress -  square shape'),
+      ),
+      body: Column(
+        spacing: 48,
+        children: [
+          StepProgress(
+            totalSteps: 4,
+            controller: stepProgressController,
+            titles: const [
+              'Step 1',
+              'Step 2',
+              'Step 3',
+              'Step 4',
+            ],
+            padding: const EdgeInsets.all(18),
+            theme: const StepProgressThemeData(
+              shape: StepNodeShape.square,
+              stepLabelAlignment: StepLabelAlignment.top,
+              stepLineSpacing: 24,
+              stepNodeStyle: StepNodeStyle(
+                decoration: BoxDecoration(
+                  borderRadius: BorderRadius.all(
+                    Radius.circular(4),
+                  ),
+                ),
+                activeDecoration: BoxDecoration(
+                  borderRadius: BorderRadius.all(
+                    Radius.circular(6),
+                  ),
+                ),
+              ),
+              stepLineStyle: StepLineStyle(
+                borderRadius: BorderRadius.all(
+                  Radius.circular(4),
+                ),
+              ),
+            ),
+          ),
+          Row(
+            mainAxisAlignment: MainAxisAlignment.center,
+            spacing: 38,
+            children: [
+              ElevatedButton(
+                onPressed: stepProgressController.previousStep,
+                child: const Text('Prev'),
+              ),
+              ElevatedButton(
+                onPressed: stepProgressController.nextStep,
+                child: const Text('Next'),
+              ),
+            ],
+          ),
+        ],
+      ),
+    );
+  }
+}