sandromaglione / step-progress-indicator

Open source Flutter package, bar indicator made of a series of selected and unselected steps

Step Progress Indicator

Open source Flutter package, bar indicator made of a series of selected and unselected steps.

Made by Sandro Maglione, check out his personal official website sandromaglione.com

Check out the full step_progress_indicator tutorial

See the full example here

Check out the official dartdoc for the package here

Screenshots

Install and import the package. Then just customize its parameters.

dependencies:
  flutter:
    sdk: flutter
  step_progress_indicator: ^1.0.2

---

The last no null-safe version of the package was v0.2.5+8

Horizontal	Vertical

Circular1	Circular2

---

Examples

StepProgressIndicator - Example 1

StepProgressIndicator(
    totalSteps: 10,
)

StepProgressIndicator - Example 2

StepProgressIndicator(
    totalSteps: 10,
    currentStep: 6,
    selectedColor: Colors.red,
    unselectedColor: Colors.yellow,
)

StepProgressIndicator - Example 3

StepProgressIndicator(
    totalSteps: 20,
    currentStep: 6,
    size: 10,
    selectedColor: Colors.purple,
    unselectedColor: Colors.transparent,
)

StepProgressIndicator - Example 4

StepProgressIndicator(
    totalSteps: 15,
    currentStep: 12,
    size: 20,
    selectedColor: Colors.amber,
    unselectedColor: Colors.black,
    roundedEdges: Radius.circular(10),
    gradientColor: LinearGradient(
        begin: Alignment.topLeft,
        end: Alignment.bottomRight,
        colors: [Colors.orange, Colors.white],
    ),
),

StepProgressIndicator - Example 5

StepProgressIndicator(
    totalSteps: 100,
    currentStep: 32,
    size: 8,
    padding: 0,
    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 - Example 6

StepProgressIndicator(
    totalSteps: 12,
    currentStep: 4,
    padding: 6.0,
    size: 12,
    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 - Example 7

StepProgressIndicator(
    totalSteps: 5,
    padding: 20.0,
    size: 20,
    customColor: (index) => index == 0
        ? Colors.redAccent
        : index == 4 ? Colors.blueAccent : Colors.deepOrange,
)

StepProgressIndicator - Example 8

StepProgressIndicator(
    totalSteps: 6,
    currentStep: 4,
    size: 36,
    selectedColor: Colors.black,
    unselectedColor: Colors.grey[200],
    customStep: (index, color, _) => color == Colors.black
        ? Container(
            color: color,
            child: Icon(
            Icons.check,
            color: Colors.white,
            ),
        )
        : Container(
            color: color,
            child: Icon(
            Icons.remove,
            ),
        ),
)

StepProgressIndicator - Example 9

StepProgressIndicator(
    totalSteps: 10,
    currentStep: 7,
    selectedColor: Colors.pink,
    unselectedColor: Colors.amber,
    customSize: (index) => (index + 1) * 10.0,
)

---

CircularStepProgressIndicator - Example 1

Row(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: <Widget>[
        CircularStepProgressIndicator(
            totalSteps: 10,
            currentStep: 6,
            width: 100,
            roundedCap: (_, isSelected) => isSelected,
        ),
        CircularStepProgressIndicator(
            totalSteps: 12,
            currentStep: 6,
            selectedColor: Colors.redAccent,
            unselectedColor: Colors.grey[200],
            selectedStepSize: 10.0,
            width: 100,
            gradientColor: LinearGradient(
                begin: Alignment.topLeft,
                end: Alignment.bottomRight,
                colors: [Colors.cyan, Colors.orangeAccent],
            ),
        ),
        CircularStepProgressIndicator(
            totalSteps: 20,
            currentStep: 6,
            padding: math.pi / 15,
            selectedColor: Colors.cyan,
            unselectedColor: Colors.yellowAccent,
            selectedStepSize: 3.0,
            unselectedStepSize: 9.0,
            width: 100,
        ),
    ],
)

CircularStepProgressIndicator - Example 2

Row(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: <Widget>[
    CircularStepProgressIndicator(
        totalSteps: 20,
        currentStep: 12,
        stepSize: 20,
        selectedColor: Colors.red,
        unselectedColor: Colors.purple[400],
        padding: math.pi / 80,
        width: 150,
        height: 150,
        startingAngle: -math.pi * 2 / 3,
        arcSize: math.pi * 2 / 3 * 2,
        gradientColor: LinearGradient(
            colors: [Colors.red, Colors.purple[400]],
        ),
    ),
    CircularStepProgressIndicator(
        totalSteps: 100,
        currentStep: 74,
        stepSize: 10,
        selectedColor: Colors.greenAccent,
        unselectedColor: Colors.grey[200],
        padding: 0,
        width: 150,
        height: 150,
        selectedStepSize: 15,
        roundedCap: (_, __) => true,
    ),
    ],
),

CircularStepProgressIndicator - Example 3

CircularStepProgressIndicator(
    totalSteps: 100,
    currentStep: 72,
    selectedColor: Colors.yellow,
    unselectedColor: Colors.lightBlue,
    padding: 0,
    width: 100,
    child: Icon(
        Icons.tag_faces,
        color: Colors.red,
        size: 84,
    ),
)

CircularStepProgressIndicator - Example 4

CircularStepProgressIndicator(
    totalSteps: 20,
    stepSize: 20,
    customColor: (index) => index % 3 == 0
        ? Colors.deepPurple
        : index % 2 == 0
            ? Colors.deepOrange
            : Colors.grey[100],
    width: 250,
)

---

StepProgressIndicator Parameters

Parameter	Type	Description	Default
totalSteps	int	Total number of step of the complete indicator.	@required
currentStep	int	Number of steps to underline, all the steps with index <= currentStep will have Color equal to selectedColor.	0
customStep(int, Color, double)	Widget	Defines a custom Widget to display at each step, given the current step index, the Color, which could be defined with selectedColor and unselectedColor or using customColor, and its size, which could be defined using size, selectedSize, unselectedSize, or customSize.	-
onTap(int)	void Function()	Defines onTap function given index of the pressed step.	-
customColor(int)	Color	Assign a custom Color for each step.	-
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.	-
blendMode	BlendMode	Apply BlendMode to ShaderMask when gradientColor, selectedGradientColor, or unselectedGradientColor defined.	-
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
padding	double	Spacing, left-right if horizontal, top-bottom if vertical, of each step.	2.0
fallbackLength	double	Length of the progress indicator in case the main axis (based on direction attribute) has no size limit i.e. double.infinity.	100.0
selectedSize	double	Specify a custom size for selected steps.	-
unselectedSize	double	Specify a custom size for unselected steps.	-
roundedEdges	Radius	Add rounded edge corners to first and last step.	-
mainAxisAlignment	MainAxisAlignment	Assign alignment MainAxisAlignment for indicator's container.	MainAxisAlignment.center
crossAxisAlignment	CrossAxisAlignment	Assign alignment CrossAxisAlignment for indicator's container.	CrossAxisAlignment.center
stepMainAxisAlignment	MainAxisAlignment	Assign alignment MainAxisAlignment for a single step.	MainAxisAlignment.center
stepCrossAxisAlignment	CrossAxisAlignment	Assign alignment CrossAxisAlignment for a single step.	CrossAxisAlignment.center

---

CircularStepProgressIndicator Parameters

Parameter	Type	Description	Default
totalSteps	int	Total number of step of the complete indicator.	@required
currentStep	int	Number of steps to underline, all the steps with index <= currentStep will have Color equal to selectedColor.	0
child	Widget	Widget child contained inside the indicator.	-
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.	-
circularDirection	CircularDirection	Defines if steps grow clockwise (CircularDirection.clockwise) or counterclockwise (CircularDirection.counterclockwise)	CircularDirection.clockwise
stepSize	double	Size of the each step of the indicator.	6.0
height	double	Height of the indicator's container.	-
width	double	Width of the indicator's container.	-
padding	double	Spacing between each step.	math.pi / 20
startingAngle	double	Angle in which is placed the starting point of the indicator.	0
roundedCap(int, bool)	bool	Adds rounded edges at the beginning and at the end of the circular indicator given int index of each step and a bool telling if the step is selected.	(_, __) => false
removeRoundedCapExtraAngle	bool	Removes extra angle caused by StrokeCap.butt when roundedCap is applied #20.	false
arcSize	double	Angle in radiants which represents the size of the arc used to display the indicator.	math.pi * 2
fallbackHeight	double	Height of the indicator's container in case the parent height has no size limit i.e. double.infinity.	100.0
fallbackWidth	double	Width of the indicator's container in case the parent width has no size limit i.e. double.infinity.	100.0

---

Roadmap

I am always open for suggestions and ideas for possible improvements or fixes.

Feel free to open a Pull Request if you would like to contribute to the project.

If you would like to have a new feature implemented, just write a new issue.

Versioning

• v1.0.2 - 2 January 2022
• v1.0.1 - 16 June 2021
• v1.0.0 - 10 May 2021
• v0.2.5+8 - 01 December 2020
• v0.2.4+7 - 25 August 2020
• v0.2.3+6 - 20 May 2020
• v0.2.2+5 - 26 April 2020
• v0.2.1+4 - 25 February 2020
• v0.2.0+3 - 24 February 2020
• v0.1.1+2 - 24 January 2020
• v0.1.0+1 - 23 January 2020

Support

If you would like to support my work, why don't you buy me a coffee?

License

MIT License, see the LICENSE.md file for details.

step-progress-indicator's Issues

Add ability to animate change in steps.

OnTap tooltip for circularStepIndicator and individual steps

Hi again,

Being able to handle ontap events, and possibly even show a tooltip can be a great way to give context and meaning to progress.
In my case, I want the user to move for a set time each hour (eg walk 10 mins each hour between 9-17)
Lets say a user doesnt finish his step from 11:00-12:00 and wants context, it would be great if I could display he walked for only 5 minutes during this step when he taps the step.

Any ideas on how this can be achieved?
I've looked a little bit at your code, and gesturedetector. I think this might get quite complex, but perhaps there's some tricks I dont know of yet.

Other enhancement could be adding a ontap for a circle, whilst also allowing ontaps for nested circles.
Although less detailed than a step, this could be a nice and simpler start.

When use customeSize, CrossAxisAlignment does not working good...

StepProgressIndicator(
                                  totalSteps: 20,
                                  currentStep: 7,
                                  crossAxisAlignment: CrossAxisAlignment.end,
                                  selectedColor: StudyColors.azul,
                                  unselectedColor: StudyColors.lightPeriwinkle,
                                  customSize: (index, _) {
                                    double size;
                                    if (index == 7 - 1) {
                                      size = 30;
                                    } else if (index == 7 - 2) {
                                      size = 20;
                                    } else {
                                      size = 10;
                                    }
                                    return size;
                                  },
                                ),

I want to all steps to make it aligned down.
but not working....

I want to make it like the picture below.

Suggestion: Allow semi-circle indicators

What do you think of adding the ability to adjust the step-progress-indicators to display as a semi-circle?

What I mean is being able to define for example that the progress indicator in circular shape reaches from 225° to 135° and increases clockwise.

Here is an example: https://imgur.com/a/IIiP8A3

How to remove the leading/trailing paddings

It seems that padding actually adds padding around each step, but for the leading and trailing steps, I don't want the padding because it makes my layout wrong. Is there a way to remove that?

Using rounded caps results in losing opacity with progressCircle

When you apply roundedCap to every step, as in the inner cicle, a color will lose its opacity. Probably because these are partially drawn over the next step?

Example code

class ActiveMinutesProgressCircle extends StatelessWidget {
  final Widget child;
  final double stepSize;
  final currentStep = 42;
  final totalSteps = 100; // Percentage!

  ActiveMinutesProgressCircle({this.child, this.stepSize = 12.0});

  @override
  Widget build(BuildContext context) {
    return CircularStepProgressIndicator(
      customColor: (int i) {
        if(currentStep > (2*totalSteps) || (currentStep > totalSteps && (currentStep % totalSteps) > i)) {
          return kColors.darkGreyBlue;
        } else if (currentStep >= i) {
          return kColors.greyBlue;
        } else {
          return Colors.white.withOpacity(0.5); // Doesnt work, opacity lost with roundedcaps
          // return const Color(0xFFF9F0CA); // Does work (same color without opacity)
        }
      },
      roundedCap: (int i, bool isSelected) => true, // If we set to false, opacity will work. Furhtermore, if we partially select true/false the end cap doesnt round nicely
      totalSteps: 100,
      currentStep: currentStep,
      selectedStepSize: stepSize,
      unselectedStepSize: stepSize,
      padding: 0,
      child: child ?? SizedBox.shrink(),
    );
  }
}

Nested (step) indicators

Hi there! Good job on the library, the first impression is pretty good and the documentation is clear.
Do you reckon its possible to nest indicators?

I would like to achieve something like the image below, where multiple progressions can be shown at once, using step and non step indicators.

I might be able to put in some effort and create a PR if this is not currently possible, although it would depend upon the complexity of the task.

Black lines are seen on every step

Implement this library to be able to control the volume and brightness, but there are black lines when totalSteps is 100, is there any solution for this?

[Bug] Rounded corner for totalsteps =1

Rounded corner doesn't go as expected when the totalsteps is 1, the rounded is only on the left (starting side only).

Modify Thickness of Circular Progress

Great plugin here. Just wish to know if there could be also a property thickness of the progress indicator. Can this be possible, I won't mind sending in a PR? Let me know your thoughts

Text inside at CircularStepProgressIndicator?

is Possible?

roundedEdges doesn't work when steps are completed

I have a progress bar of 8 steps, starting from step 1. When the bar is "full", meaning that the steps are completed, the roundedEdges property doesn't work properly, as on the right side the effect gets removed. I assume it is because the overlay color just gets on top of it.

I am attaching an image and my code. You can see the right side of the bar does not have any rounded edges.

StepProgressIndicator(
	totalSteps: 8,
	currentStep: _currentSet,
	size: 10,
	padding: 0,
	selectedColor: const Color(0xFF56DDF5),
	unselectedColor: Colors.white,
	roundedEdges: const Radius.circular(7),
	selectedGradientColor: const LinearGradient(
		begin: Alignment.topLeft,
		end: Alignment.bottomRight,
		colors: [
			Color(0xFFD4EFFA),
			Color(0xFF56DDF5),
		],
	),
),

Is there any workaround for this? Or am I just doing it wrong?

Thank you.

roundedEdges: not working

I have tried both null safety versions but this issue does not solve. Please look into issue and help me to find some good solution . Thanks in advance!

progress indicator with round shape.

Hi There,

Do we have the option to create the below progress indicator?

I am planning to create the below steps with an icon.

Rounded edges at the corners

Hi!
Could you add rounded edges in the corner as in the image below?

Thanks

That's a super nice component, but how to perform looping animations when loading?

Dynamic height with scrollable for custom length of steps

I am using verticle StepProgressIndicator and I want to give dynamic height to it because I am generating steps based on the length of API.

Is there any way to give height dynamically with a scrollable list of indicators?

Nullsafety support

Hi,

Can you please migrate to a null safety version please?

How to remove border width, or border color for StepProgressIndicator?

This one shown in the image:

Is it possible to set-them In the appBar?

dont have curvy edges modification for CircularStepProgressIndicator widget.

Hi Team,

We don't have curvy edges modification for the CircularStepProgressIndicator widget. Similarly like roundedEdges: Radius.circular(10), for the StepProgressIndicator.

Is there any option, can you please revert it.

Allow previously selected steps to have a different style than the current step

Apply rounded Edges even when steps are 0

Hello,

Thank you for the great package. I am having an issue when I apply the rounded Edges. I would like the bar to show a rounded edge even when the current steps are 0.

This is how the current bar looks like:

and this is how I would like it to look like.

Is there any way I can get it to have a round edge even when the steps are 0.

Issues with size

Since sizing is forced on customStep instead of wrapping content this causes a number of overflow problems.

This is when using forced sizing:

When removing size this is caused:

I would suggest allowing wrapping. Because even when size is not set and I try to set the height and width on the container I return in customStep, nothing changes.

Code to reproduce:

var steps = ["concern", "photograph", "ai result", "another"];
var currentStep = 1;
Container(
            padding: const EdgeInsets.symmetric(
              horizontal: PaddingSize.medium,
              // vertical: PaddingSize.medium,
            ),
            // color: appBarColor,
            child: StepProgressIndicator(
              // size: 25,
              totalSteps: steps.length,
              currentStep: currentStep,
              selectedColor: Colors.yellow,
              unselectedColor: Colors.grey,
              customStep: (index, color, __) => Container(
                color: color,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text(
                      "${index + 1}. ${steps[index].toUpperCase()}",
                      textAlign: TextAlign.center,
                      style: const TextStyle(
                        fontSize: 10,
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),

Linear Color Gradient

Hi there!

This is my ever first submitted issue so I hope this isn't too vague, but I was wondering if it is at all possible to add a property for a linear color gradient?
Thanks!

Animation between oldValue and new Value

First of all great package!

One thing I would wish is the possibility to animate from an oldValue to a newValue. This would require a StatefulWidget so I don't know if it is in scope.

Use case: User gets point for finishing a task. His progress is shown by the step-progress-indicator. Instead of jumping from oldValue to the newValue a smooth animation occurs.

Circular Progress Indicator is not Circular

I was not able to Create a Pure, Circular Indicator,
It is Coming up like this, But it was expected, something circular...

Here is the code which I was using(this code is just copied from the amazing repo)

                                    Card(
                                        elevation: 0.4,
                                        child: Wrap(children: [
                                          ListTile(
                                            leading: IconButton(
                                              onPressed: () {},
                                              icon: Icon(
                                                  CarbonIcons.radio_button,
                                                  color: Colors.blue),
                                            ),
                                          ),
                                          ListTile(
                                            title:  CircularStepProgressIndicator(
                                                totalSteps: streako.streakDays,
                                                currentStep: 10,
                                                stepSize: 10,
                                                selectedColor:
                                                    Colors.greenAccent,
                                                unselectedColor:
                                                    Colors.grey[200],
                                                padding: 0,
                                                width: 60,
                                                height: 60,
                                                selectedStepSize: 15,
                                                roundedCap: (_, __) => true,
                                              ),
                                            ),
                                          )....```

ProgressIndicator not work with gradientColor and padding > 0

This code is not work

StepProgressIndicator(
    totalSteps: 10,
    currentStep: 6,
    size: 10,
    selectedColor: Colors.red,
    unselectedColor: Colors.transparent,
    gradientColor: const LinearGradient(
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
      colors: [
        Colors.green,
        Colors.yellow,
        Colors.red,
        Colors.red
      ],
    ),
  )

but this code is work fine

StepProgressIndicator(
    totalSteps: 10,
    currentStep: 6,
    size: 10,
    padding: 0,
    selectedColor: Colors.white,
    unselectedColor: Colors.transparent,
    gradientColor: const LinearGradient(
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
      colors: [
        Colors.green,
        Colors.yellow,
        Colors.red,
        Colors.red
      ],
    ),
  )

make unrounded caps steps same size as rounded caps

Hi again,

Rounded caps are of a bigger size than unrounded ones, it seems like the rounding is added on top of the regular step size.

Would you agree it is preferable that these are both the same length, and the rounding should start and end within the stepSize?

An option to have labels with the current step to help with onboarding or relevant flows

Either a String label with the currentStep, vertically center aligned with the current step widget (I guess it needs to be linear for this to work). Or even labels with every step if not just the current one.
Should add a new dimension to the package.