[flutter] 플러터 Stepper에서 값을 증가시키거나 감소시키는 방법은?

플러터(Flutter)의 Stepper 위젯은 사용자가 값을 증가시키거나 감소시킬 수 있는 인터페이스를 제공합니다. 이 기능을 구현하려면 다음과 같은 단계를 따를 수 있습니다:

  1. StatefulWidget을 상속받는 새로운 위젯을 생성합니다.
    class MyStepper extends StatefulWidget {
      @override
      _MyStepperState createState() => _MyStepperState();
    }
    
  2. 상태 클래스를 만들고 Stepper 위젯에 대한 초기값을 설정합니다. 또한 값을 저장할 변수도 선언합니다. ```dart class _MyStepperState extends State { int _currentStep = 0; // 현재 스텝을 저장할 변수

List _steps = [ Step( title: Text('Step 1'), content: Text('Content for Step 1'), ), Step( title: Text('Step 2'), content: Text('Content for Step 2'), ), // 추가적인 스텝들 ];

@override Widget build(BuildContext context) { return Stepper( steps: _steps, currentStep: _currentStep, onStepContinue: () { setState(() { _currentStep < _steps.length - 1 ? _currentStep += 1 : null; }); }, onStepCancel: () { setState(() { _currentStep > 0 ? _currentStep -= 1 : null; }); }, ); } }


3. 이제 `MyStepper` 위젯을 사용하면 Stepper를 출력할 수 있습니다:
```dart
// 특정 위젯에서 사용 예
class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Stepper Example')),
      body: MyStepper(),
    );
  }
}

위의 코드에서 StepperonStepContinueonStepCancel 콜백 함수는 각각 스텝을 다음으로 진행하거나 이전으로 되돌릴 때 호출됩니다. setState 함수를 통해 _currentStep 값을 업데이트하고 화면을 다시 그리도록 합니다.

이제 Stepper에서 값을 증가시키거나 감소시키는 방법에 대해 간단히 알아보았습니다. 여기에는 추가적인 기능을 구현할 수도 있으니 필요에 따라 커스터마이징하여 사용할 수 있습니다.

참고 자료: