[flutter] 플러터 Stepper의 스타일과 외관을 변경하는 방법은?

07 Dec 2023

flutter

플러터에서 Stepper는 단계별로 진행되는 작업의 완료 상태를 표시하는 데 사용되는 위젯입니다. 기본적으로 Stepper의 외관은 Material Design에 따라 제공됩니다. 그러나 필요에 따라 Stepper의 스타일과 외관을 변경할 수도 있습니다. 이번 포스트에서는 플러터 Stepper의 스타일을 변경하는 방법에 대해 알아보겠습니다.

스타일 변경하기

Stepper의 스타일을 변경하려면 StepperTheme 위젯을 사용할 수 있습니다. StepperTheme은 Stepper의 전반적인 스타일을 변경할 수 있는 많은 속성을 제공합니다. 아래는 Stepper의 일부 속성을 변경하는 예시 코드입니다.

Stepper(
  controlsBuilder: (BuildContext context, {VoidCallback onStepContinue, VoidCallback onStepCancel}) {
    return Row(
      children: <Widget>[
        FlatButton(
          onPressed: onStepContinue,
          child: const Text('Continue'),
        ),
        FlatButton(
          onPressed: onStepCancel,
          child: const Text('Cancel'),
        ),
      ],
    );
  },
  steps: [
    Step(
      title: const Text('Step 1'),
      content: const Text('Content for Step 1'),
    ),
    Step(
      title: const Text('Step 2'),
      content: const Text('Content for Step 2'),
    ),
    Step(
      title: const Text('Step 3'),
      content: const Text('Content for Step 3'),
    ),
  ],
),

위의 코드는 Stepper의 controlsBuilder 속성을 재정의하여 기본적인 “Continue” 및 “Cancel” 버튼 대신 사용자 정의 버튼을 표시하는 방법을 보여줍니다.

외관 변경하기

Stepper의 외관을 변경하려면 커스텀 위젯을 만들거나 내장된 테마를 사용할 수 있습니다. 색상, 텍스트 스타일, 아이콘 등을 변경하여 Stepper에서 원하는 외관을 만들 수 있습니다. 아래는 Stepper의 외관을 변경하는 예시 코드입니다.

Stepper(
  steps: [
    Step(
      title: const Text('Step 1'),
      content: const Text('Content for Step 1'),
      state: StepState.complete,
      isActive: true,
    ),
    Step(
      title: const Text('Step 2'),
      content: const Text('Content for Step 2'),
      state: StepState.editing,
      isActive: true,
    ),
    Step(
      title: const Text('Step 3'),
      content: const Text('Content for Step 3'),
      state: StepState.disabled,
      isActive: false,
    ),
  ],
)

위의 코드는 Stepper의 일부 단계(step)를 완료 상태, 편집 상태, 비활성 상태로 변경하여 외관을 바꾸는 방법을 보여줍니다.

스타일 변경하기

외관 변경하기

참고 자료