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: