[flutter] 플러터 Stepper를 사용하여 숫자를 선택하는 예제 애플리케이션을 만들어보자.

07 Dec 2023

flutter

Stepper Example

이번 예제에서는 Flutter의 Stepper 위젯을 사용하여 사용자가 숫자를 선택할 수 있는 간단한 애플리케이션을 만들어 보겠습니다.

Stepper란?

Stepper는 다단계 양식이나 프로세스를 구성할 때 사용되는 Flutter 위젯입니다. 그것은 사용자가 한 단계씩 진행하며 값을 선택하거나 입력할 수 있도록 해줍니다.

애플리케이션 개요

이 예제 애플리케이션에서는 Stepper 위젯을 사용하여 사용자가 숫자를 선택할 수 있습니다. 스탭을 따라서 사용자는 원하는 숫자를 선택할 수 있으며, 선택한 숫자는 화면에 표시됩니다.

코드 예제

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int _currentStep = 0;
  int _selectedNumber = 0;

  List<Step> _steps = [
    Step(
      title: Text('Step 1'),
      content: Text('Select a number'),
      isActive: true,
    ),
    Step(
      title: Text('Step 2'),
      content: Text('Confirmation'),
      isActive: false,
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text('Number Selection'),
        ),
        body: Stepper(
          currentStep: _currentStep,
          onStepTapped: (step) {
            setState(() {
              _currentStep = step;
            });
          },
          onStepContinue: () {
            setState(() {
              if (_currentStep < _steps.length - 1) {
                _currentStep++;
              } else {
                // Handle final step
              }
            });
          },
          steps: _steps,
          controlsBuilder: (BuildContext context,
              {VoidCallback onStepContinue, VoidCallback onStepCancel}) {
            return Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                FlatButton(
                  onPressed: onStepContinue,
                  child: Text('Next'),
                ),
                FlatButton(
                  onPressed: () {
                    setState(() {
                      if (_currentStep > 0) {
                        _currentStep--;
                      }
                    });
                  },
                  child: Text('Back'),
                ),
              ],
            );
          },
        ),
      ),
    );
  }
}

위의 코드는 Stepper를 사용하여 숫자 선택을 구현하는 Flutter 애플리케이션 예제입니다. Stepper 위젯은 _currentStep 변수와 _steps 리스트를 사용하여 현재 단계 및 단계의 목록을 관리합니다. onStepTapped 이벤트 핸들러를 사용하여 사용자가 스탭을 탭할 때마다 특정 단계로 이동하도록 설정하고, onStepContinue 이벤트 핸들러를 사용하여 사용자가 다음 단계로 진행할 수 있도록 합니다.

애플리케이션 화면에는 현재 선택한 숫자를 표시하는 공간도 제공됩니다. 본 예제에서는 _selectedNumber 변수를 사용하여 선택한 숫자를 저장하고 이를 화면에 표시합니다.

결론

이번 포스트에서는 Flutter의 Stepper 위젯을 사용하여 숫자 선택 예제 애플리케이션을 만드는 방법을 소개했습니다. Stepper는 다단계 프로세스를 쉽게 구현할 수 있는 강력한 도구입니다. 추가적으로 Stepper의 다양한 속성과 사용 방법을 알아보고 활용해보시길 바랍니다.

더 자세한 내용은 Flutter 공식 문서을 참조하시기 바랍니다.