[flutter] 플러터 Stepper의 다양한 설정 옵션에 대해 알아보자.

07 Dec 2023

flutter

Flutter에서 Stepper 위젯은 다양한 설정 옵션을 제공하여 단계별로 진행되는 작업을 구현할 수 있습니다. 이번 포스트에서는 Stepper의 다양한 설정 옵션을 알아보겠습니다.

Stepper란?

Stepper는 Flutter의 Material 디자인 패턴을 따르는 위젯으로, 여러 단계를 거쳐 작업을 진행할 때 사용됩니다. 각 단계는 순차적으로 진행되며, 이전 단계로 돌아가거나 다음 단계로 이동할 수 있습니다. 사용자는 가시적으로 현재 단계를 확인할 수 있습니다.

Stepper 위젯 생성

먼저, Stepper 위젯을 생성하는 방법을 알아보겠습니다. 아래는 Stepper 위젯을 생성하고 화면에 표시하는 간단한 예시입니다.

Stepper(
  steps: [
    Step(
      title: Text('Step 1'),
      content: Text('Content for Step 1'),
    ),
    Step(
      title: Text('Step 2'),
      content: Text('Content for Step 2'),
    ),
    Step(
      title: Text('Step 3'),
      content: Text('Content for Step 3'),
    ),
  ],
)

위 예시에서는 Stepper의 steps 프로퍼티에 각 단계(Step)의 제목과 내용을 지정하여 전달합니다.

기본 설정 옵션

Stepper의 기본 설정 옵션은 아래와 같습니다.

currentStep: 현재 진행 중인 단계의 인덱스를 설정합니다.
onStepContinue: 다음 단계로 이동할 때 실행할 함수를 지정합니다.
onStepCancel: 이전 단계로 돌아갈 때 실행할 함수를 지정합니다.

프로퍼티 설정

Step 위젯은 title, content, subtitle, isActive 등 다양한 프로퍼티를 가집니다. 이들 프로퍼티를 사용하여 각 단계의 제목, 내용, 부제목을 지정하고 활성화 상태를 설정할 수 있습니다.

Stepper(
  steps: [
    Step(
      title: Text('Step 1'),
      subtitle: Text('Subtitle for Step 1'),
      content: Text('Content for Step 1'),
      isActive: true,
    ),
    Step(
      title: Text('Step 2'),
      content: Text('Content for Step 2'),
      isActive: false,
    ),
  ],
)

스타일 변경

Stepper의 스타일을 변경하려면 stepColor, activeStepColor, controlsBuilder 등의 프로퍼티를 사용할 수 있습니다. 이 프로퍼티들을 사용하여 단계의 색상, 활성화된 단계의 색상, 컨트롤 버튼을 사용자 정의할 수 있습니다.

Stepper(
  steps: [...],
  stepColor: Colors.blue,
  activeStepColor: Colors.green,
  controlsBuilder: (BuildContext context, {VoidCallback onStepContinue, VoidCallback onStepCancel}) {
    // 사용자 정의 컨트롤 버튼 렌더링
    // return 버튼 위젯
  },
)

참고 자료

Flutter Stepper 클래스 문서

위에서 살펴본 것은 Stepper의 일부 설정 옵션에 대한 간단한 설명입니다. 실제로 Stepper를 활용하면서 더 다양한 설정 옵션들을 찾아보시기 바랍니다.

목차