CODEWITHSUNDEEP
flutterdart
jfordummies
jfordummies

Reputation: 317

How can I change the labels of the Continue/Cancel buttons in flutter stepper?

Is there any way to change the text labels of the Continue and Cancel Buttons of the stepper in flutter? Stepper seems to be the perfect choice for what I want to do (long form with several "stages") and before I go try to build one from scratch just to get other labels for the buttons I thought I may ask..

Anybody knows if/how thats possible?

Upvotes: 9

Views: 12062

Answers (5)

Botan Muhamad
Botan Muhamad

Reputation: 11

controlsBuilder: (BuildContext context, ControlsDetails details) {
            final _isLastStep = _currentStep == _getSteps.length - 1;
            return Container(
                margin: const EdgeInsets.only(top: 50),
                child: Row(children: [
                  Expanded(
                      child: ElevatedButton(
                          child: Text(_isLastStep ? 'Send' : 'Next'),
                          onPressed: details.onStepContinue)),
                  const SizedBox(
                    width: 12,
                  ),
                  if (_currentStep != 0)
                    Expanded(
                        child: ElevatedButton(
                            child: Text('Back'),
                            onPressed: details.onStepCancel))
                ]));
          },

Upvotes: 1

Javier C.
Javier C.

Reputation: 8257

Solution for flutter version > 2.8.1

In flutter version > 2.8.1 you can not use this for change the labels or buttons:

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

Use this:

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

Or this:

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


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

This is a complete example changing the labels text and colors:

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...)
  //...
)

Upvotes: 0

Abdelrahman Mohamed Elakliby
Abdelrahman Mohamed Elakliby

Reputation: 589

flutter version 2.8.1 inside the Stepper you can use controlsBuilder you can change buttons enter image description here

                controlsBuilder: (context,_) {
                  return Row(
                    children: <Widget>[
                      TextButton(
                        onPressed: (){},
                        child: const Text('NEXT'),
                      ),
                      TextButton(
                        onPressed: (){},
                        child: const Text('EXIT'),
                      ),
                    ],
                  );
                },

Upvotes: 6

LKC
LKC

Reputation: 71

I m late for the discussion. But i have just done it and think it is good to share. The code is able to control the Text for each step as the code below. Each step will have difference text, manage to do for 3 steps. If more than that, the code will be quite messy. Hope it helps someone who is looking for it.

controlsBuilder: (BuildContext context,
              {VoidCallback onStepContinue, VoidCallback onStepCancel}) {
            return Row(
              children: <Widget>[
                _activeCurrentStep == 0
                    ? TextButton(
                        onPressed: onStepContinue,
                        child: const Text('NEXT'),
                      )
                    : _activeCurrentStep == 1
                        ? Container(
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                TextButton(
                                  onPressed: onStepContinue,
                                  child: const Text('NEXT'),
                                ),
                                TextButton(
                                  onPressed: onStepCancel,
                                  child: const Text('BACK'),
                                ),
                              ],
                            ),
                          )
                        : _activeCurrentStep >= 2
                            ? Container(
                                child: Row(
                                  mainAxisAlignment:
                                      MainAxisAlignment.spaceBetween,
                                  children: [
                                    TextButton(
                                      onPressed: onStepContinue,
                                      child: const Text('SAVE'),
                                    ),
                                    TextButton(
                                      onPressed: onStepCancel,
                                      child: const Text('BACK'),
                                    ),
                                  ],
                                ),
                              )
                            : TextButton(
                                onPressed: onStepCancel,
                                child: const Text('BACK'),
                              ),
              ],
            );
          },

Upvotes: 0

pedro pimont
pedro pimont

Reputation: 3084

Yes, you can by providing a controlsBuilder callback. Which has to be a function that takes two other functions (onStepContinue and onStepCancel) which are the actions that you will have to pass to the new buttons you'll create in order for them to act as they should.

Then you can declare anything you want (in this case a row with two buttons) as long you pass the two functions (onStepContinue and onStepCancel) for them to work as its expected:

Stepper(
      controlsBuilder: (BuildContext context,
          {VoidCallback? onStepContinue, VoidCallback? onStepCancel}) {
        return Row(
          children: <Widget>[
            TextButton(
              onPressed: onStepContinue,
              child: const Text('NEXT'),
            ),
            TextButton(
              onPressed: onStepCancel,
              child: const Text('EXIT'),
            ),
          ],
        );
      },
      steps: const <Step>[
        Step(
          title: Text('A'),
          content: SizedBox(
            width: 100.0,
            height: 100.0,
          ),
        ),
        Step(
          title: Text('B'),
          content: SizedBox(
            width: 100.0,
            height: 100.0,
          ),
        ),
      ],
    );

Upvotes: 17

Related Questions