[flutter] 플러터 Stepper의 최소값과 최대값을 설정하는 방법은?

07 Dec 2023

flutter

플러터(Flutter)의 Stepper 위젯은 단계별로 진행할 수 있는 인터페이스를 제공하는 위젯입니다. 이 위젯을 사용할 때, 최소값과 최대값을 설정하여 사용자의 입력을 제한할 수 있습니다. 이번 글에서는 플러터 Stepper 위젯의 최소값과 최대값을 설정하는 방법을 알아보겠습니다.

플러터의 Stepper 위젯을 사용하려면, 이를 구성하는 Step 객체를 생성해야 합니다. 각 Step은 사용자에게 보여질 내용과 데이터를 포함하고 있습니다. 이 중에서 최소값과 최대값을 설정하는 방법은 다음과 같습니다:

Step(
  title: Text('Step 1'),
  content: Text('Content for Step 1'),
  state: StepState.indexed,
  isActive: true,
), 

위 예시에서는 Step 객체를 생성하고, title 속성을 사용하여 제목을 설정하고, content 속성을 사용하여 내용을 설정하였습니다.

이제, 최소값과 최대값을 설정하는 방법을 알아보겠습니다.

최소값 설정하기

Stepper 위젯에서 최소값을 설정하는 방법은 current 속성을 사용하는 것입니다. current 속성에는 현재 단계의 인덱스를 설정합니다. 이를 통해 사용자는 최소값 이전의 단계로 돌아갈 수 없습니다.

아래 예시는 Stepper를 생성하고 최소값을 1로 설정한 것입니다:

int currentStep = 1;

Stepper(
  currentStep: currentStep,
  steps: [
    Step(
      title: Text('Step 1'),
      content: Text('Content for Step 1'),
      state: StepState.indexed,
      isActive: true,
    ),
    Step(
      title: Text('Step 2'),
      content: Text('Content for Step 2'),
      state: StepState.indexed,
      isActive: true,
    ),
    Step(
      title: Text('Step 3'),
      content: Text('Content for Step 3'),
      state: StepState.indexed,
      isActive: true,
    ),
  ],
),

위 예시에서는 currentStep 변수를 사용하여 현재 단계를 설정하였습니다. 이렇게 하면 사용자는 첫 번째 단계 이전의 단계로 돌아갈 수 없습니다.

최대값 설정하기

Stepper 위젯에서 최대값을 설정하는 방법은 각 Step 객체의 onStepContinue 콜백 함수를 사용하여 구현할 수 있습니다. 이 함수에서는 현재 단계를 기준으로 사용자가 다음 단계로 이동할 수 있는지 확인해야 합니다.

아래 예시는 최대값을 3으로 설정하고, onStepContinue 함수에서 최대값을 초과하여 다음 단계로 이동할 수 없도록 구현한 것입니다:

int currentStep = 1;
int maxSteps = 3;

Stepper(
  currentStep: currentStep,
  onStepContinue: () {
    if (currentStep < maxSteps) {
      setState(() {
        currentStep++;
      });
    }
  },
  steps: [
    Step(
      title: Text('Step 1'),
      content: Text('Content for Step 1'),
      state: StepState.indexed,
      isActive: true,
    ),
    Step(
      title: Text('Step 2'),
      content: Text('Content for Step 2'),
      state: StepState.indexed,
      isActive: true,
    ),
    Step(
      title: Text('Step 3'),
      content: Text('Content for Step 3'),
      state: StepState.indexed,
      isActive: true,
    ),
  ],
),

위 예시에서는 onStepContinue 함수에서 currentStep 변수가 maxSteps 값을 초과하지 않을 때만 다음 단계로 이동할 수 있도록 구현하였습니다. 이렇게 하면 최대값을 초과하는 단계로 이동할 수 없게 됩니다.

이제, 플러터 Stepper 위젯을 사용할 때 최소값과 최대값을 설정하는 방법에 대해 알아보았습니다. 이를 참고하여 사용자 입력을 제한하고 최적의 사용자 경험을 제공할 수 있습니다.

참고 자료: