Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
ahamzatariq opened this issue Sep 27, 2021 · 1 comment
Labels
question Further information is requested

Comments

@ahamzatariq
Copy link

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
Copy link
Owner

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

Screenshot 2022-01-02 at 15 59 23

@SandroMaglione SandroMaglione added the question Further information is requested label Jan 2, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
question Further information is requested
Projects
None yet
Development

No branches or pull requests

2 participants