Added Gradient color to both StepProgressIndicator and CircularStepProgressIndicator

CHANGELOG.md

@@ -1,7 +1,8 @@
 ## [0.2.4+7] - Coming soon
 - Added `roundedCap` property to `CircularStepProgressIndicator` ([#7](https:/SandroMaglione/step-progress-indicator/issues/7))
+- Added `gradientColor` property to `CircularStepProgressIndicator`, and `gradientColor`, `selectedGradientColor` and `unselectedGradientColor` to `StepProgressIndicator` ([#8](https:/SandroMaglione/step-progress-indicator/issues/8))
 - Fixed `customStepSize` when `circularDirection` is `CircularDirection.counterclockwise`: now the step indexes start at 0 from the left to the right as expected
-- Added `isSelected` bool parameter to `customStepSize`, used to change the step size based on the selected/unselected status of the current step
+- Added `isSelected` bool parameter to `customStepSize`, used to change the step size based on the selected/unselected status of the current step (**breaking change**)
 
 ## [0.2.3+6] - 20 May 2020
 - Added `arcSize` property to `CircularStepProgressIndicator` that allows you to draw semi-circle indicators ([#3](https:/SandroMaglione/step-progress-indicator/issues/3))

README.md

@@ -91,6 +91,11 @@ StepProgressIndicator(
  selectedColor: Colors.amber,
  unselectedColor: Colors.black,
  roundedEdges: Radius.circular(10),
+ gradientColor: LinearGradient(
+ begin: Alignment.topLeft,
+ end: Alignment.bottomRight,
+ colors: [Colors.orange, Colors.white],
+ ),
 ),
 ```
 
@@ -106,6 +111,16 @@ StepProgressIndicator(
  selectedColor: Colors.yellow,
  unselectedColor: Colors.cyan,
  roundedEdges: Radius.circular(10),
+ selectedGradientColor: LinearGradient(
+ begin: Alignment.topLeft,
+ end: Alignment.bottomRight,
+ colors: [Colors.yellowAccent, Colors.deepOrange],
+ ),
+ unselectedGradientColor: LinearGradient(
+ begin: Alignment.topLeft,
+ end: Alignment.bottomRight,
+ colors: [Colors.black, Colors.blue],
+ ),
 ),
 ```
 
@@ -121,6 +136,16 @@ StepProgressIndicator(
  progressDirection: TextDirection.rtl,
  selectedColor: Colors.green,
  unselectedColor: Colors.black12,
+ selectedGradientColor: LinearGradient(
+ begin: Alignment.topLeft,
+ end: Alignment.bottomRight,
+ colors: [Colors.yellowAccent, Colors.deepOrange],
+ ),
+ unselectedGradientColor: LinearGradient(
+ begin: Alignment.topLeft,
+ end: Alignment.bottomRight,
+ colors: [Colors.black, Colors.blue],
+ ),
 )
 ```
 
@@ -299,6 +324,9 @@ CircularStepProgressIndicator(
 | customSize`(int)` | `double` | Assign a custom size for each step. | - |
 | selectedColor | `Color` | Color of the selected steps. | `Colors.blue` |
 | unselectedColor | `Color` | Color of the unselected steps. | `Colors.grey` |
+| gradientColor | `Gradient` | Apply gradient color to the indicator. | - |
+| selectedGradientColor | `Gradient` | Apply gradient color to the selected steps of the indicator. | - |
+| unselectedGradientColor | `Gradient` | Apply gradient color to the unselected steps of the indicator. | - |
 | direction | `Axis` | Defines if indicator is horizontal or vertical. | `Axis.horizontal` |
 | progressDirection | `TextDirection` | Defines if steps grow from left-to-right / top-to-bottom `TextDirection.ltr` or right-to-left / bottom-to-top `TextDirection.rtl`. | `TextDirection.ltr` |
 | size | `double` | Size of the indicator (height if `direction` is `Axis.horizontal`, width if `Axis.vertical`). | 4.0 |
@@ -320,6 +348,7 @@ CircularStepProgressIndicator(
 | selectedColor | `Color` | Color of the selected steps. | `Colors.blue` |
 | unselectedColor | `Color` | Color of the unselected steps. | `Colors.grey` |
 | customColor`(int)` | `Color` | Assign a custom Color for each step. | - |
+| gradientColor | `Gradient` | Apply a gradient color to the indicator. | - |
 | customStepSize`(int, bool)` | `double` | Assign a custom size for each step. | - |
 | selectedStepSize | `double` | Specify a custom size for selected steps. | - |
 | unselectedStepSize | `double` | Specify a custom size for unselected steps. | - |

example/horizontal_bar.dart

@@ -44,6 +44,11 @@ class HorizontalBar extends StatelessWidget {
  selectedColor: Colors.amber,
  unselectedColor: Colors.black,
  roundedEdges: Radius.circular(10),
+ gradientColor: LinearGradient(
+ begin: Alignment.topLeft,
+ end: Alignment.bottomRight,
+ colors: [Colors.orange, Colors.white],
+ ),
  ),
  StepProgressIndicator(
  totalSteps: 100,
@@ -53,6 +58,16 @@ class HorizontalBar extends StatelessWidget {
  selectedColor: Colors.yellow,
  unselectedColor: Colors.cyan,
  roundedEdges: Radius.circular(10),
+ selectedGradientColor: LinearGradient(
+ begin: Alignment.topLeft,
+ end: Alignment.bottomRight,
+ colors: [Colors.yellowAccent, Colors.deepOrange],
+ ),
+ unselectedGradientColor: LinearGradient(
+ begin: Alignment.topLeft,
+ end: Alignment.bottomRight,
+ colors: [Colors.black, Colors.blue],
+ ),
  ),
  StepProgressIndicator(
  totalSteps: 12,
@@ -62,6 +77,16 @@ class HorizontalBar extends StatelessWidget {
  progressDirection: TextDirection.rtl,
  selectedColor: Colors.green,
  unselectedColor: Colors.black12,
+ selectedGradientColor: LinearGradient(
+ begin: Alignment.topLeft,
+ end: Alignment.bottomRight,
+ colors: [Colors.yellowAccent, Colors.deepOrange],
+ ),
+ unselectedGradientColor: LinearGradient(
+ begin: Alignment.topLeft,
+ end: Alignment.bottomRight,
+ colors: [Colors.black, Colors.blue],
+ ),
  ),
  StepProgressIndicator(
  totalSteps: 5,

lib/src/circular_step_progress_indicator.dart

@@ -46,7 +46,7 @@ class CircularStepProgressIndicator extends StatelessWidget {
  /// Takes a [int], index of the current step starting from 0, and
  /// must return a [Color]
  ///
- /// If provided, it overrides
+ /// **NOTE**: If provided, it overrides
  /// [selectedColor] and [unselectedColor]
  final Color Function(int) customColor;
 
@@ -90,7 +90,7 @@ class CircularStepProgressIndicator extends StatelessWidget {
  /// a [bool], which tells if the step is selected based on [currentStep],
  /// and must return a [double] size of the step
  ///
- /// If provided, it overrides [stepSize]
+ /// **NOTE**: If provided, it overrides [stepSize]
  final double Function(int, bool) customStepSize;
 
  /// [Widget] contained inside the circular indicator
@@ -141,6 +141,11 @@ class CircularStepProgressIndicator extends StatelessWidget {
  /// padding: 0
  /// ```
  final bool Function(int, bool) roundedCap;
+
+ /// Adds a gradient color to the circular indicator
+ ///
+ /// **NOTE**: If provided, it overrides [selectedColor], [unselectedColor], and [customColor]
+ final Gradient gradientColor;
 
  // TODO: final bool isRadial;
 
@@ -154,6 +159,7 @@ class CircularStepProgressIndicator extends StatelessWidget {
  this.selectedStepSize,
  this.unselectedStepSize,
  this.roundedCap,
+ this.gradientColor,
  this.circularDirection = CircularDirection.clockwise,
  this.fallbackHeight = 100.0,
  this.fallbackWidth = 100.0,
@@ -179,6 +185,7 @@ class CircularStepProgressIndicator extends StatelessWidget {
  if (arcSize > math.pi * 2)
  print(
  "WARNING (step_progress_indicator): arcSize of CircularStepProgressIndicator is greater than 360° (math.pi * 2), this will cause some steps to overlap!");
+ final TextDirection textDirection = Directionality.of(context);
 
  return LayoutBuilder(
  builder: (context, constraints) => SizedBox(
@@ -211,6 +218,8 @@ class CircularStepProgressIndicator extends StatelessWidget {
  unselectedStepSize: unselectedStepSize,
  startingAngle: startingAngleTopOfIndicator,
  roundedCap: roundedCap,
+ gradientColor: gradientColor,
+ textDirection: textDirection,
  ),
  // Padding needed to show the indicator when child is placed on top of it
  child: Padding(
@@ -265,6 +274,8 @@ class _CircularIndicatorPainter implements CustomPainter {
  final double startingAngle;
  final double arcSize;
  final bool Function(int, bool) roundedCap;
+ final Gradient gradientColor;
+ final TextDirection textDirection;
 
  _CircularIndicatorPainter({
  @required this.totalSteps,
@@ -282,6 +293,8 @@ class _CircularIndicatorPainter implements CustomPainter {
  @required this.arcSize,
  @required this.maxDefinedSize,
  @required this.roundedCap,
+ @required this.gradientColor,
+ @required this.textDirection,
  });
 
  @override
@@ -306,6 +319,11 @@ class _CircularIndicatorPainter implements CustomPainter {
  width: w - maxDefinedSize,
  );
 
+ if (gradientColor != null) {
+ paint.shader =
+ gradientColor.createShader(rect, textDirection: textDirection);
+ }
+
  // Change color selected or unselected based on the circularDirection
  final isClockwise = circularDirection == CircularDirection.clockwise;
 
@@ -412,8 +430,8 @@ class _CircularIndicatorPainter implements CustomPainter {
  // Second arc, selected when counterclockwise, unselected otherwise
  _drawArcOnCanvas(
  canvas: canvas,
- paint: paint,
  rect: rect,
+ paint: paint,
  startingAngle: secondArcStartingAngle,
  sweepAngle: secondArcLength,
  strokeWidth: secondStepSize,
@@ -424,8 +442,8 @@ class _CircularIndicatorPainter implements CustomPainter {
  // First arc, selected when clockwise, unselected otherwise
  _drawArcOnCanvas(
  canvas: canvas,
- paint: paint,
  rect: rect,
+ paint: paint,
  startingAngle: startingAngle,
  sweepAngle: firstArcLength,
  strokeWidth: firstStepSize,
@@ -436,8 +454,8 @@ class _CircularIndicatorPainter implements CustomPainter {
  // First arc, selected when clockwise, unselected otherwise
  _drawArcOnCanvas(
  canvas: canvas,
- paint: paint,
  rect: rect,
+ paint: paint,
  startingAngle: startingAngle,
  sweepAngle: firstArcLength,
  strokeWidth: firstStepSize,
@@ -448,8 +466,8 @@ class _CircularIndicatorPainter implements CustomPainter {
  // Second arc, selected when counterclockwise, unselected otherwise
  _drawArcOnCanvas(
  canvas: canvas,
- paint: paint,
  rect: rect,
+ paint: paint,
  startingAngle: secondArcStartingAngle,
  sweepAngle: secondArcLength,
  strokeWidth: secondStepSize,