Stepper 사용법

개요

constructor

설명

Widget build(BuildContext context) {
  return Stepper(
    controlsBuilder:
      (BuildContext context, {VoidCallback onStepContinue, VoidCallback onStepCancel}) {
         return Row(
           children: <Widget>[
             FlatButton(
               onPressed: onStepContinue,
               child: const Text('CONTINUE'),
             ),
             FlatButton(
               onPressed: onStepCancel,
               child: const Text('CANCEL'),
             ),
           ],
         );
      },
    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,
        ),
      ),
    ],
  );
}

예시

Stepper(
    steps : _mySteps(),
    currentStep : this._currentStep,
    onStepTapped: (step){
        setState((){
            this._currentStep = step;
        });
    },
    onStepContinue: (){
        setState((){
            if(this._currentStep < this._mySteps().length -1 ) {
                this._currentStep = this._currentStep + 1;
            }else{
                // Logic to check if everything is completed
                print('Completed, check fields.');
            },
        });
    },
    onStepCancel: (){
        setState((){
            if(this._currentStep > 0){
                this._currentStep = this._currentStep -1;
            }
            else
            {
                this._currentStep = 0;
            }
        })
    }
),

List<Step> _mySteps(){
    List<Step> _steps =[
        Step(
            title : Text('Step 1'),
            content : TextField(),
            isActive : _currentStep >= 0,
        ),
        Step(
            title : Text('Step 2'),
            content : TextField(),
            isActive : _currentStep >= 1,
        ),
        Step(
            title : Text('Step 3'),
            content : TextField(),
            isActive : _currentStep >= 2,
        ),
    ];
    return steps;
}

예시 2

  int _currentStep = 0;
  bool complete = false;

  next() {
    _currentStep + 1 != _stepsLength
        ? goTo(_currentStep + 1)
        : setState(() => complete = true);
  }

  cancel() {
    if (_currentStep > 0) {
      goTo((_currentStep - 1));
    }
  }

  goTo(int step) {
    setState(() {
      _currentStep = step;
    });
  }

  StepState stateSetting(int step) {
    if (step == _currentStep)
      return StepState.editing;
    else if (step > _currentStep)
      return StepState.disabled;
    else
      return StepState.complete;
  }
  
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          title: Text('테스트'),
        ),
        body: Stepper(
          steps: [
            Step(
              title: Text('1'),
              isActive: _currentStep >= 0,
              content: TestSetting(),
            ),
            Step(
              title: Text('2'),
              isActive: _currentStep >= 1,
              content: Text('1230'),
            ),
            Step(
              title: Text('3'),
              isActive: _currentStep >= 2,
              content: Text('1212'),
            ),
            Step(
              title: Text('4'),
              isActive: _currentStep >= 3,
              content: Text('결과 content'),
            )
          ],
          currentStep: _currentStep,
          type: StepperType.vertical,
          onStepTapped: (step) => goTo(step),
          onStepContinue: next,
          onStepCancel: cancel,
        ),
      ),
    );
  }
}