Как изменить Step StepState при продолжении

Question

Я следовал этому уроку https://www.youtube.com/watch?v=izbkS2svuq4

и было краткое упоминание об изменении StepState на StepState.editing, чтобы вы получили значок карандаша.

Как я могу изменить StepState шага, на котором я нахожусь, чтобы он менял состояние на редактирование (или завершение), когда я наступаю на него или мимо него

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

Переместите объявление списка шагов в build method и объявить state поле каждого шага, как, например, первый шаг: _stepCounter == 0 ? StepState.editing : StepState.indexed и удали эту строку steps[step].state = StepState.editing; так как .state является окончательным и, следовательно, не может быть изменено.

Answer 2

Завершите пример с 3 состояниями при перемещении шагов:

class _State extends State<MyApp> {

  int _current;

  List<StepState> _listState;

  @override
  void initState() {
    _current = 0;
    _listState = [
      StepState.indexed,
      StepState.editing,
      StepState.complete,
    ];
    super.initState();
  }

  List<Step> _createSteps(BuildContext context) {
    List<Step> _steps = <Step>[
      new Step(
        state: _current == 0
            ? _listState[1]
            : _current > 0 ? _listState[2] : _listState[0],
        title: new Text('Step 1'),
        content: new Text('Do Something'),
        isActive: true,
      ),
      new Step(
        state: _current == 1
            ? _listState[1]
            : _current > 1 ? _listState[2] : _listState[0],
        title: new Text('Step 2'),
        content: new Text('Do Something'),
        isActive: true,
      ),
      new Step(
        state: _current == 2
            ? _listState[1]
            : _current > 2 ? _listState[2] : _listState[0],
        title: new Text('Step 3'),
        content: new Text('Do Something'),
        isActive: true,
      ),
    ];
    return _steps;
  }

  @override
  Widget build(BuildContext context) {
    List<Step> _stepList = _createSteps(context);
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Stepper Example'),
      ),
      body: new Container(
        padding: new EdgeInsets.all(20.0),
        child: new Center(
          child: new Column(
            children: <Widget>[
              Expanded(
                child: Stepper(
                  type: StepperType.vertical,
                  steps: _stepList,
                  currentStep: _current,
                  onStepContinue: () {
                    setState(() {
                      if (_current < _stepList.length - 1) {
                        _current++;
                      } else {
                        _current = _stepList.length - 1;
                      }
                      //_setStep(context);
                    });
                  },
                  onStepCancel: () {
                    setState(() {
                      if (_current > 0) {
                        _current--;
                      } else {
                        _current = 0;
                      }
                      //_setStep(context);
                    });
                  },
                  onStepTapped: (int i) {
                    setState(() {
                      _current = i;
                    });
                  },
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}