Documentation request for Stepper Class

[chrislondon]

At the moment I'm blindly making a stepper and experimenting with the settings. Documentation would greatly speed up my efforts.

[eseidelGoogle]

It looks like we have some minimal docs:
https://docs.flutter.io/flutter/material/Stepper-class.html

But no example or sample:
https://flutter.io/catalog/samples/
https://github.com/flutter/flutter/search?utf8=%E2%9C%93&q=stepper&type=

It's possible @nisrulz already has one: https://github.com/nisrulz/flutter-examples

[Hixie]

@chrislondon If you have specific questions you'd like answered which the docs don't currently answer please list them explicitly here, then when we add docs we'll make sure to explicit answer the specific questions you list here (along with anything else we can think of). It's often really hard to write good docs without a prompt. :-)

[chrislondon]

I'll probably post more comments as I go. Here were the first snags I ran into:

1. How do I implement the "Mobile dot steps" listed in the Material design guide?

2. Why do I have to set isActive? Seems like that should just be automatic since the stepper automatically displays the content based on the currentStep.

3. How do I implement onStepContinue?

I did get this working but I was trying things like:

    onStepContinue: () {
        setState(() {
            _currentStep++;
        });
    }

But _currentStep is final so I ended up having to do:

    Stepper _stepper;

    Stepper buildStepper(int step) {
        _stepper = new Stepper(
            currentStep: step,
            ...
            onStepContinue: () {
                setState(() {
                    buildStepper(step + 1);
                });
            };

        return _stepper;
    }

    Widget build(BuildContext context) {
        return buildStepper(0);
    }

[nisrulz]

@eseidelGoogle I actually didn't have the example for Stepper. But it was easy to implement, I saw this and update my flutter-examples repo

@chrislondon this example should help you out with managing the state of the Stepper Widget, have a look at code here

https://github.com/nisrulz/flutter-examples/blob/master/using_stepper/lib/main.dart

I have added comments in there, but if you have any questions please let me know 😺

[sethladd]

There are many Steppers defined in https://material.io/guidelines/components/steppers.html, we could specifically document which Stepper(s) is implemented by https://docs.flutter.io/flutter/material/Stepper-class.html

I'd also love a screenshot for https://docs.flutter.io/flutter/material/Stepper-class.html to help me understand what kind of stepper this is.

For example, do we show dots? Progress bar?

[nisrulz]

@sethladd I have working gifs in my example app here, showing 2 possible ones as of now.

[sethladd]

Thanks! Would you be willing to send a PR to update and clarify the API docs for https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/material/stepper.dart#L128 ?

[chrislondon]

I would love the following Material specs to be implemented:

[sethladd]

@chrislondon apologies, but would you be willing to comment on #12500 or open a new issue specifically for "stepper with progress bar" ?

This issue is about updating the API docs in Stepper to better clarify what kinds of steppers we currently implement.

Sorry for the confusion here... we thank you for your feedback!

[nisrulz]

@sethladd I could do that sometime towards the EOD. Can't promise though 😅

[sethladd]

Today or tomorrow.. either works :) Thanks!!

[nisrulz]

@sethladd Just wanted to clarify, the only update I need to be sending as a PR has to be dartdoc comment mentioning the kinds of steppers flutter currently implements, at the line you earlier linked?

Since there isn't any example for Stepper, should I add that too here? or just add a link to my repository in the readme (that way I wouldn't be changing anything in flutter repo except the readme.md and examples repo would be decoupled from flutter project, just a suggestion). Let me know what you think.

Thank you

[sethladd]

@nisrulz at a minimum, please update the API docs for the Stepper class to be specific about which kinds of steppers one can use.

A bonus would be a small snippet of code in the API docs for the Stepper class, which shows how to use Stepper class for the various configurations/types.

All this would be in a single PR.

Other PRs can add examples and links, perhaps to our Sample catalog.

Thank you!

[ghost]

@nisrulz I got a clue about how to implement stepper, thanks to your example. However, I tried putting a TextField widget in the content of a step. The problem I am facing is that if I enter some text in the widget, and traverse to the next step, the text entered in the TextField at the previous Step is gone. This happens with StepperType.horizontal and not vertical. Can you help me out here. I have opened a separate issue #19835 . It would be great if we can figure this out soon.

[ghost]

### I was able to implement horizontal mode for stepper, and making it look good after customizing the widget. Here is a screenshot, I added some icons to display stepper state, instead of building circle, or triangle.

[lukasgit]

@Shantanu-Kotambkar do you have example code for how you implemented horizontal mode for stepper? Thanks!

[TahaTesser]

Looks like Stepper Class documentation exist now https://api.flutter.dev/flutter/material/Stepper-class.html

There are definitely improvements needed in the doc but it does exist so i am closing this issue and for improvements, please created new issue

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.