An option to have labels with the current step to help with onboarding or relevant flows

[ahamzatariq]

Either a String label with the currentStep, vertically center aligned with the current step widget (I guess it needs to be linear for this to work). Or even labels with every step if not just the current one. Should add a new dimension to the package.

[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,
                ),
              ],
            ),
          ],
        ),
      )),
    );
  }
}