CODEWITHSUNDEEP
flutterdart
Zeffry Reynando
Zeffry Reynando

Reputation: 3899

Flutter : Disable Previous Stepper Click

I am using Stepper Widget to make Change PinCode Form. Everything is okay, but i don't know how to disable previous stepper click.

Example :

I don't want to go back to step 1 if i am in step 2 by clicking the Stepper.

How can i solve this ?

stepper

Here's my source Code :

Form(
        key: _formKey,
        child: Stepper(
          steps: steps(),
          currentStep: currStep,
          onStepContinue: () {
            setState(() {
              if (formKeys[currStep].currentState.validate()) {
                if (currStep < steps().length - 1) {
                  currStep += 1;
                } else if (steps().length == 2) {
                  print('Done');
                } else {
                  currStep = 0;
                }
              }
            });
          },
          onStepTapped: (step) {
            setState(() {
              currStep = step;
              print(step);
            });
          },
        ),
      ),
 List<Step> steps() {
    return [
      Step(
        title: const Text('Enter Previous PinCode'),
        isActive: currStep == 0 ? true : false,
        state: StepState.indexed,
        content: Form(
          key: formKeys[0],
          child: TextFormField(
            autofocus: true,
            keyboardType: TextInputType.number,
            validator: (value) {
              if (value.isEmpty || value != userModelHive.pinCodeNumber) {
                return 'PinCode Invalid';
              }
              return null;
            },
          ),
        ),
      ),
      Step(
        title: const Text('Enter New PinCode'),
        isActive: true,
        state: StepState.indexed,
        content: Form(
          key: formKeys[1],
          child: TextFormField(
            autofocus: true,
            keyboardType: TextInputType.number,
            validator: (value) {
              if (value.isEmpty) {
                return 'Provided PinCode';
              } else if (value.length < 4 || value.length > 6) {
                return "More than 4 Less than 6";
              }
              return null;
            },
          ),
        ),
      ),
    ];
  }

Upvotes: 4

Views: 3099

Answers (3)

Harris
Harris

Reputation: 33

You can use the state parameter in Stepper.

state: _currentStep >= 1? StepState.disabled : StepState.complete

StepState.disabled will make it not clickable.

Upvotes: 1

Stefano Saitta
Stefano Saitta

Reputation: 2014

I'm not aware of any way of doing this which is supported out of the box by the Stepper widget. My proposed approach will be something like:

//List of already visited steps indexes
List<int> alreadyVisitedStepsIndexes = [];

// Your form
Stepper(
  steps: steps,
  currentStep: currStep,
  onStepTapped: (step) {
   // I'm not sure if step is already the index of it
   // if that's the case this code can be simplified

   var indexOfSelectedStep = steps.indexOf(step);
   if(!alreadyVisitedStepsIndexes.contains(indexOfSelectedStep)){
     alreadyVisitedStepsIndexes.add(indexOfSelectedStep);
     setState(() {
       currStep = step;
     });
   }
  },
)

Upvotes: 0

Guru Prasad mohapatra
Guru Prasad mohapatra

Reputation: 1969

just check for the step variable in the onStepTapped weather it is previous or not..if it is the previous step then don't call setState

Stepper(
    steps:steps(),
    currentStep:currentStep,
    onStepTapped:(step){
      if(step>currentStep){
        setState((){
            currentStep=step;
        });
      }
    }
)

Upvotes: 9

Related Questions