How to modify a Step StepState on continue

Question

I was following this tutorial https://www.youtube.com/watch?v=izbkS2svuq4

and there was a brief mention of modifying the StepState to StepState.editing so you get a pencil icon.

How can I modify the StepState of the step I am on so that it changes the state to editing (or complete) when I step on/past it

class _SimpleWidgetState extends State<SimpleWidget> {
  int _stepCounter = 0;

  List<Step> steps = [
    Step(
      title: Text("Step One"),
      content: Text("This is the first step"),
      isActive: true
    ),
    Step(
      title: Text("Step Two"),
      content: Text("This is the second step"),
      isActive: true,
    ),
    Step(
      title: Text("Step Three"),
      content: Text("This is the third step"),
      isActive: true,
    ),
    Step(
      title: Text("Step Four"),
      content: Text("This is the fourth step"),
      isActive: true,
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Stepper(
        steps: steps,
        currentStep: this._stepCounter,
        type: StepperType.vertical,
        onStepTapped: (step) {
          setState(() {
            _stepCounter = step;
            steps[step].state = StepState.editing; // this does not work but is what Im trying to accomplish
          });
        },
        onStepCancel: () {
          setState(() {
            _stepCounter > 0 ? _stepCounter -= 1 : _stepCounter = 0;
          });
        },
        onStepContinue: () {
          setState(() {
            _stepCounter < steps.length - 1 ? _stepCounter += 1 : _stepCounter = 0;
          });
        },
      ),
    );
  }
}

Answer 1

Move the Step list declaration into the build method and declare the state field of each step as for instance first step: _stepCounter == 0 ? StepState.editing : StepState.indexed and remove this line steps[step].state = StepState.editing; because .state is final and therefore can't be changed.