make unrounded caps steps same size as rounded caps

[RickVM]

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?

[RickVM]

I have found another issue with using roundedcaps. 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(),
    );
  }
}

[SandroMaglione]

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

Yes, they should indeed be the same length. I will fix it 🔜

a color will lose its opacity

I am not sure why this happens. I will try to see what could be the problem 🤔

[SandroMaglione]

@RickVM I fixed the issue of the rounded cap size, adding a removeRoundedCapExtraAngle option to make all the steps the same length.
Here an example with removeRoundedCapExtraAngle = true on the top and removeRoundedCapExtraAngle = false on the bottom.

---

I will take a look also at the opacity issue. Do you mind opening a separate issue for the opacity problem?