roundedEdges doesn't work when steps are completed

[pzehle]

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.

[DennisZachotzky]

Same problem here.

Workaround: I wrapped the StepProgressIndicator with a ClipRRect.

ClipRRect(
borderRadius: BorderRadius.circular(10),
child: StepProgressIndicator(
totalSteps: 100,
currentStep: 100,//completed.toInt(),
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.end,
progressDirection: TextDirection.rtl,
size: 10,
padding: 0,
),
),

edit: Only works at the 100% step.

[aminbh111]

Before:

After:

i just added one line of code to /lib/src/step_progress_indicator.dart: