Open
Description
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(),
);
}
}