[flutter] 플러터 Stepper의 현재 값을 추적하는 방법은?

07 Dec 2023

flutter

Stepper 위젯을 생성합니다.

int currentStep = 0; // 현재 단계의 값을 추적하기 위한 변수

Stepper(
  currentStep: currentStep, // 현재 단계 설정
  steps: [
    Step(
      title: Text('Step 1'),
      content: Text('Content for Step 1'),
      isActive: currentStep == 0, // 현재 단계인지 확인하는 조건식
    ),
    Step(
      title: Text('Step 2'),
      content: Text('Content for Step 2'),
      isActive: currentStep == 1,
    ),
    Step(
      title: Text('Step 3'),
      content: Text('Content for Step 3'),
      isActive: currentStep == 2,
    ),
  ],
),

Stepper 위젯에서 현재 단계를 변경할 때마다 값을 추적합니다. 이를 위해 onChanged 콜백을 사용합니다.

Stepper(
  //...
  onStepContinue: () {
    setState(() {
      currentStep < steps.length - 1
          ? currentStep += 1 // 다음 단계로 이동
          : null; // 단계가 마지막이면 아무 작업도 하지 않음
    });
  },
  onStepCancel: () {
    setState(() {
      currentStep > 0 ? currentStep -= 1 : null; // 이전 단계로 이동
    });
  },
),

위의 코드에서 setState 함수를 사용하여 currentStep 값을 변경하면, Stepper 위젯이 다시 렌더링되어 현재 단계를 반영할 수 있습니다.

이제 Stepper를 사용하면서 현재 단계의 값을 추적할 수 있는 방법을 알게 되었습니다.