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.

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?

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
      ],
    ),
  )

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.

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

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.

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.

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!

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

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!

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,
                                              ),
                                            ),
                                          )....```

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,
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),

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?

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.

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.

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?