[flutter/dart] Stepper로 단계 나누기

이렇게 단계가 나누어져서 한 단계씩 올라가는 화면을 만들어보겠습니다.

Theme(
        data: ThemeData(
          colorScheme: ColorScheme.light(
              primary: Colors.grey
          ),
        ),
        child: Column(
          children: [
            Expanded(
                child: Stepper()
            )
          ],
        ),
      )

단계를 나타내는 숫자가 들어가는 곳의 색은 grey로 설정해 주었습니다.

int _currentStep = 0;

단계가 넘어갈 때 카운트를 하기 위해 int형 변수를 하나 만들어 주었습니다.

elevation: 0.0,
type: StepperType.horizontal,
currentStep: _currentStep,
onStepTapped: (step) => tapped(step),
onStepContinue: continued,
steps: <Step>[
    Step(),
]

타입은 수평으로 넘어가도록 설정해 주었습니다.

앞에서 설정해 준 인트 형 변수로 카운트를 해주었습니다.

Step(
    title: Text('1단계'),
    content: Column(
        children: [
            Text("이름", style: TextStyle(fontSize: 20),),
            TextFormField(
                decoration: InputDecoration(
                    labelStyle: TextStyle(color: Colors.black, fontSize: 20),
                    hintText: '이름'
                ),
            ),
            SizedBox(height: 30,),
           ],
          ),
          isActive: _currentStep >= 0,
          state: _currentStep >= 0
              ? StepState.complete
              : StepState.disabled,
),

Step 안에는 원하는 페이지를 만들어 주시면 됩니다.

그리고 밑에 상태 변경을 위한 코드도 넣어주시면 됩니다.

tapped(int step) {
    setState(() => _currentStep = step);
  }

  continued() {
    _currentStep < 2 ? setState(() => _currentStep += 1) : null;
  }

  cancel() {
    _currentStep > 0 ? setState(() => _currentStep -= 1) : null;
  }

다음 페이지와 전 페이지로 돌아가기 위한 연산 함수입니다.

Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
        ElevatedButton(
            onPressed: () {
              if (_currentStep <= 0) {
                Navigator.pop(context);
              }
              if(_currentStep==1){
                cancel();
              }
              if(_currentStep==2){
                cancel();
              }
            },
            child: Text('취소', style: TextStyle(fontSize: 17, fontWeight: FontWeight.bold),),
            style: ElevatedButton.styleFrom(
              backgroundColor: Color(0xFFE0E0E0),
              fixedSize: Size(150, 25),
            ),
          ),
          ElevatedButton(
              onPressed: () {
                if (_currentStep >= 2) {
                   Navigator.push(
                       context,
                       MaterialPageRoute(
                           builder: (context) => const groupSelect()));
                 } else {
                       continued();
                 }
               },
               child: Text('다음', 
                   style: TextStyle(fontSize: 17, fontWeight: FontWeight.bold,),
               ),
               style: ElevatedButton.styleFrom(
                   backgroundColor: Color(0xFFFFA84E),
                   fixedSize: Size(70, 25),
               ),
          ),
     ],
)

첫 번째 단계에서는 전 화면으로 돌아가도록 하고

두 번째, 세 번째 단계에서는 전 단계로 돌아가도록 해주었습니다.

결과화면

전체코드

class _imagepageState extends State<imagepage> {
  int _currentStep = 0;

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: Text("step"),
      ),
      body: Theme(
        data: ThemeData(
          colorScheme: ColorScheme.light(
              primary: Colors.grey
          ),
        ),
        child: Column(
          children: [
            Expanded(
                child: Stepper(
                  elevation: 0.0,
                  type: StepperType.horizontal,
                  currentStep: _currentStep,
                  onStepTapped: (step) => tapped(step),
                  onStepContinue: continued,
                  steps: <Step>[
                    Step(
                      title: Text('1단계'),
                      content: Column(
                        children: [
                          Text("이름", style: TextStyle(fontSize: 20),),
                          TextFormField(
                            decoration: InputDecoration(
                                labelStyle: TextStyle(color: Colors.black, fontSize: 20),
                                hintText: '이름'
                            ),
                          ),
                          SizedBox(height: 30,),
                        ],
                      ),
                      isActive: _currentStep >= 0,
                      state: _currentStep >= 0
                          ? StepState.complete
                          : StepState.disabled,
                    ),
                    Step(
                      title: Text('2단계'),
                      content: Column(
                        children: [
                          Text("나이", style: TextStyle(fontSize: 20),),
                          TextFormField(
                            decoration: InputDecoration(
                                labelStyle: TextStyle(color: Colors.black, fontSize: 20),
                                hintText: '나이'
                            ),
                          ),
                          SizedBox(height: 30,),
                        ],
                      ),
                      isActive: _currentStep >= 0,
                      state: _currentStep >= 1
                          ? StepState.complete
                          : StepState.disabled,
                    ),
                    Step(
                      title: Text('3단계'),
                      content: Column(
                        children: [
                          Text("생일", style: TextStyle(fontSize: 20),),
                          TextFormField(
                            decoration: InputDecoration(
                                labelStyle: TextStyle(color: Colors.black, fontSize: 20),
                                hintText: '생일'
                            ),
                          ),
                          SizedBox(height: 30,),
                        ],
                      ),
                      isActive: _currentStep >= 0,
                      state: _currentStep >= 2
                          ? StepState.complete
                          : StepState.disabled,
                    ),
                  ],
                  controlsBuilder:
                      (BuildContext context, ControlsDetails details) {
                    return Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        ElevatedButton(
                          onPressed: () {
                            if (_currentStep <= 0) {
                              Navigator.pop(context);
                            }
                            if(_currentStep==1){
                              cancel();
                            }
                            if(_currentStep==2){
                                  cancel();
                            }
                          },
                          child: Text('취소', style: TextStyle(fontSize: 17, fontWeight: FontWeight.bold),),
                          style: ElevatedButton.styleFrom(
                            backgroundColor: Color(0xFFE0E0E0),
                            fixedSize: Size(150, 25),
                          ),
                        ),
                        ElevatedButton(
                          onPressed: () {
                            if (_currentStep >= 2) {
                              /*Navigator.push(
                                  context,
                                  MaterialPageRoute(
                                      builder: (context) => const groupSelect()));*/
                            } else {
                              continued();
                            }
                          },
                          child: Text('다음', style: TextStyle(fontSize: 17, fontWeight: FontWeight.bold,),
                          ),
                
                            style: ElevatedButton.styleFrom(
                            backgroundColor: Color(0xFFFFA84E),
                            fixedSize: Size(70, 25),
                          ),
                        ),
                      ],
                    );
                  },
                )
            )
          ],
        ),
      )
    );
  }
  tapped(int step) {
    setState(() => _currentStep = step);
  }

  continued() {
    _currentStep < 2 ? setState(() => _currentStep += 1) : null;
  }

  cancel() {
    _currentStep > 0 ? setState(() => _currentStep -= 1) : null;
  }
}