How to dynamically change the number of steps in stepper in flutter?

Viewed 3477

I am making a validation form in a stepper format in flutter. Each step has a validation form.

When first opening the page, there is only one step. I want the user to click continue and get one more stepper (i.e Step 2 and get one more step by clicking continue in step 2.)

I have tried to change the number of steps by adding one more step to the list and updating when changeCurrentStepContinue is called, but it can't increase the number of steps showing error. On going back and again going forward, I get the updated list.

So how can I change the number of steps on the same page by clicking continue in each step?

2 Answers

I don't know how "good" my trick is, but I just change the Key of the Stepper by adding the total amount of items in the list I'm binding to.

return Stepper(
      key: Key("mysuperkey-" +  items.length.toString()),
      ...
);

This should create a new Stepper when the total of step changes.

Cheers

Its not possible as per comment in stepper.dart that says /// The length of [steps] must not change. but I'd made some edits that works fine for vertical stepper.

Follow this steps to apply that patch into your flutter code

  1. cd to flutter directory
  2. download this file 0001-Made-Stepper-Stepper-Size-Dynamic.patch and keep it in flutter folder
  3. In your terminal $ git apply 0001-Made-Stepper-Stepper-Size-Dynamic.patch

OR

Replace _buildVertical() in /flutter/packages/flutter/lib/src/material/stepper.dart with this function

Related