I want to create a generic Stepper that take's any number of steps (widget).
StepIndicator
class StepIndicator extends ConsumerWidget {
final int positionInStep; // no need of it I guess
final int currentStep;
const StepIndicator(
{super.key,
required this.positionInStep,
required this.currentStep,
});
@override
Widget build(BuildContext context, WidgetRef ref) {
final Color baseColor = const Color(0xFF011235);
final Color lineColor = positionInStep == 0
? Colors.transparent
: (currentStep >= positionInStep
? baseColor
: baseColor.withOpacity(0.1));
final dotClor =
currentStep >= positionInStep ? baseColor : baseColor.withOpacity(0.1);
// final Color circleColor =
// currentStep > positionInStep ? baseColor : baseColor.withOpacity(0.1);
return GenericRow(
useExpanded: false,
children: [
// This was the line before Circle indicator
Container(
height: 5,
width: 16,
color: lineColor,
),
//
Container(
decoration: BoxDecoration(shape: BoxShape.circle, color: dotClor),
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Container(
width: 10,
height: 10,
decoration:
const BoxDecoration(shape: BoxShape.circle, color: Colors.white),
),
),
),
],
);
}
}
I wanted the above widget to work in the project . I have changed title in Step . Also change label in Step but not able to fix it . I also tried to chnage controlbuilder but none of the solution help me in creating such indicators.