Flutter Stepper widget 문서

Stepper Widget

순차적 또는 단계적으로 사용자에게 무언가를 요구 또는 보여줄 때 사용하기 적합한 위젯입니다. Steeper 자식 위젯으로 Step 이 있습니다. 왼쪽 사진은 custom controlsBuilder 적용한 사진이며 오른쪽 사진은 기본 controlsBuilder입니다.

 

Stepper 프로퍼티

• type - vertical, horizontal 있다.
• controlsBuilder - Continue, Cancel 버튼의 위젯 영역을 담당하는 프로퍼티
  
  • 해당 프로퍼티를 삭제하면 위에 오른쪽 사진처럼 된다.
• StepState - 5가지의 상태
  • complete - 체크 아이콘으로 변경
  • disabled - 비활성화(회색으로 변경)
  • error - 에러 아이콘
  • editing - 연필 모양의 아이콘
  • indexed - 현재 index 값을 숫자 아이콘으로 표시
  • custom State를 추가하고 싶을 때 steeper.dart 에 들어가서 _buildCircleChild, _titleStyle, _subtitleStyle 수정하면 됩니다.

Stepper(
  type: stepperType,
  physics: ScrollPhysics(),
  elevation: 0,
  currentStep: _currentStep,
  margin: const EdgeInsets.fromLTRB(60, 0, 60, 0),
  onStepTapped: (step) => tapped(step),
  onStepContinue: continued,
  onStepCancel: cancel,
  steps: <Step>[
    Step(
      title: Text('Account'),
      subtitle: Text('subtitle'),
      content: Column(
        children: <Widget>[
          TextFormField(
            decoration: InputDecoration(labelText: 'Email Address'),
          ),
          TextFormField(
            decoration: InputDecoration(labelText: 'Password'),
          ),
        ],
      ),
      isActive: _currentStep >= 0,
      state: _currentStep >= 0 ? StepState.complete : StepState.disabled,
    ),
    Step(
      title: Text('Address'),
      content: Column(
        children: <Widget>[
          TextFormField(
            decoration: InputDecoration(labelText: 'Home Address'),
          ),
          TextFormField(
            decoration: InputDecoration(labelText: 'Postcode'),
          ),
        ],
      ),
      isActive: _currentStep >= 0,
      state: _currentStep >= 1 ? StepState.complete : StepState.disabled,
    ),
    Step(
      title: Text('Mobile Number'),
      content: Column(
        children: <Widget>[
          TextFormField(
            decoration: InputDecoration(labelText: 'Mobile Number'),
          ),
        ],
      ),
      isActive: _currentStep >= 0,
      state: _currentStep >= 2 ? StepState.complete : StepState.disabled,
    ),
  ],
  controlsBuilder: (BuildContext context, ControlsDetails details) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        ElevatedButton(
            onPressed: () {
              continued();
            },
            child: Text('OK')),
        ElevatedButton(
            onPressed: () {
              cancel();
            },
            child: Text('Cancel')),
      ],
    );
  },