An option to have labels with the current step to help with onboarding or relevant flows about step-progress-indicator

[SandroMaglione]

Hi @ahamzatariq,

You can actually already achieve this. For example:

1. Define a custom step that contains a container with the Text label and step indicator
2. Define two indicators on top of each other with same number of steps, one with the labels and the other as a plain indicator

class WithLabelSizedIndicator extends StatelessWidget {
  const WithLabelSizedIndicator({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
          child: Padding(
        padding: const EdgeInsets.all(50.0),
        child: Column(
          children: [
            // With custom step
            StepProgressIndicator(
              totalSteps: 20,
              currentStep: 4,
              size: 30,
              customStep: (index, _, __) => Container(
                decoration: BoxDecoration(
                  border: Border.all(color: Colors.grey, width: 2),
                ),
                child: Column(
                  children: [
                    Text('$index'),
                    Container(
                      height: 10,
                      color: Colors.yellow,
                    )
                  ],
                ),
              ),
            ),

            // Spacing
            const SizedBox(height: 30),

            // With double indicator
            Column(
              children: [
                StepProgressIndicator(
                  totalSteps: 20,
                  currentStep: 4,
                  size: 20,
                  customStep: (index, _, __) => Text('$index'),
                ),
                const StepProgressIndicator(
                  totalSteps: 20,
                  currentStep: 4,
                ),
              ],
            ),
          ],
        ),
      )),
    );
  }
}