[flutter] 플러터 Stepper의 사용법과 코드 예시는 어떻게 되는가?

07 Dec 2023

flutter

Flutter에서 Stepper는 사용자가 단계별로 진행되는 프로세스를 표시하기 위한 위젯입니다. 각 단계마다 사용자는 이전 단계로 돌아갈 수도 있고, 다음 단계로 이동할 수도 있습니다.

Stepper 위젯

Stepper는 steps와 currentStep 두 가지 중요한 속성을 가져야 합니다.

steps: 리스트 형태로 정의된 각 단계들입니다. 각 단계는 Step 클래스의 인스턴스여야 하며, 제목, 내용, 상태 등을 포함할 수 있습니다.
currentStep: 현재 활성화된 단계의 인덱스입니다.

코드 예시

아래는 Stepper의 간단한 예시 코드입니다.

import 'package:flutter/material.dart';

class MyStepper extends StatefulWidget {
  @override
  _MyStepperState createState() => _MyStepperState();
}

class _MyStepperState extends State<MyStepper> {
  int _currentStep = 0;

  List<Step> _steps = [
    Step(
      title: Text("Step 1"),
      content: Text("This is the content of step 1"),
      isActive: true,
    ),
    Step(
      title: Text("Step 2"),
      content: Text("This is the content of step 2"),
      isActive: false,
    ),
    Step(
      title: Text("Step 3"),
      content: Text("This is the content of step 3"),
      isActive: false,
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Stepper Example"),
      ),
      body: Stepper(
        currentStep: _currentStep,
        onStepTapped: (int index) {
          setState(() {
            _currentStep = index;
          });
        },
        steps: _steps,
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: MyStepper(),
  ));
}

위 코드는 세 개의 단계를 가진 Stepper 예시를 보여줍니다. 현재 활성화된 단계는 onStepTapped 콜백을 사용하여 변경할 수 있습니다.

이 예시를 실행하면 Stepper 위젯이 포함된 앱이 표시됩니다. 사용자는 단계 변경을 위해 각 단계를 탭할 수 있습니다.

더 많은 속성과 기능을 사용하려면 공식 Flutter documentation을 참조하시기 바랍니다.