플러터(Flutter)의 Stepper 위젯은 사용자가 값을 증가시키거나 감소시킬 수 있는 인터페이스를 제공합니다. 이 기능을 구현하려면 다음과 같은 단계를 따를 수 있습니다:
StatefulWidget
을 상속받는 새로운 위젯을 생성합니다.class MyStepper extends StatefulWidget { @override _MyStepperState createState() => _MyStepperState(); }
- 상태 클래스를 만들고 Stepper 위젯에 대한 초기값을 설정합니다. 또한 값을 저장할 변수도 선언합니다.
```dart
class _MyStepperState extends State
{ int _currentStep = 0; // 현재 스텝을 저장할 변수
List
@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(),
);
}
}
위의 코드에서 Stepper
의 onStepContinue
와 onStepCancel
콜백 함수는 각각 스텝을 다음으로 진행하거나 이전으로 되돌릴 때 호출됩니다. setState
함수를 통해 _currentStep
값을 업데이트하고 화면을 다시 그리도록 합니다.
이제 Stepper에서 값을 증가시키거나 감소시키는 방법에 대해 간단히 알아보았습니다. 여기에는 추가적인 기능을 구현할 수도 있으니 필요에 따라 커스터마이징하여 사용할 수 있습니다.
참고 자료: