How to remove continue btn from stepper in flutter?

user_16388049 0
Viewed 1950

stepper issue screen shot here

I want to create a delivery status flow to check user product details. When I write stepper to show this flow there are also continue and cancel buttons on the page but I want to remove these things.

Please help me, I am new in flutter.

flutter android
4 Answers

Stepper widget has a controlsBuilder parameter which is what you need.

Stepper(
      controlsBuilder: (context, {onStepContinue, onStepCancel}) {
        return SizedBox();
      },
      ...
    )

If you check the comments inside the Stepper class source files, you can find more examples of how to control it:

Stepper(
        controlsBuilder: (context, {onStepContinue, onStepCancel}) {
          return Row(
            children: <Widget>[
              TextButton(
                onPressed: onStepContinue,
                child: const Text('NEXT'),
              ),
              TextButton(
                onPressed: onStepCancel,
                child: const Text('CANCEL'),
              ),
            ],
          );
        },
        ...
    )
user_90390320

return Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ ElevatedButton( onPressed: controls.onStepContinue,

                child: Text(isLastStep ? 'Submit' : 'Next'),
              ),
              if (_currentStep != 0)

                ElevatedButton(
                  onPressed: controls.onStepCancel,
                  child: const Text('Back'),
                ),
            ],
          );
user_183504680

Stepper widget has a controlsBuilder parameter which can be used.

 controlsBuilder: (context, {onStepContinue, onStepCancel}) {
                return Row(
                  children: <Widget>[
                    Container(),
                    Container(),
                  ],
                );
              }
user_65269940

Solution for flutter version > 2.8.1

In flutter version > 2.8.1 you can not use this:

 controlsBuilder: (context, {onStepContinue, onStepCancel}) {...}

Use this:

 controlsBuilder: (context, _) {...}

Or this:

 controlsBuilder: (context, onStepContinue) {...}


 controlsBuilder: (context, onStepCancel) {...}

This is a complete example:

Stepper(
  controlsBuilder: (context, _) {
    return Row(
      children: <Widget>[
        TextButton(
          onPressed: () {},
          child: const Text(
            'NEXT',
            style:
              TextStyle(color: Colors.blue),
          ),
        ),
        TextButton(
          onPressed: () {},
          child: const Text(
            'EXIT',
            style:
              TextStyle(color: Colors.blue),
          ),
        ),
      ],
    );
  },
  //Rest of the Stepper code (currentStep, onStepCancel, onStepContinue, steps...)
  //...
)
user_37393820
Related