[flutter] 플러터 Stepper를 사용하여 사용자가 선택한 도서의 권수를 입력하는 도서 관리 애플리케이션을 만들어보자.

07 Dec 2023

flutter

이번 예제에서는 플러터의 Stepper 위젯을 사용하여 도서의 권수를 입력하는 도서 관리 애플리케이션을 만들어보겠습니다.

시작하기 전에

이 예제를 따라하기 위해서는 Flutter SDK와 개발 환경을 미리 설치해야 합니다. Flutter SDK와 개발 환경의 설치 방법은 Flutter 공식 문서를 참고해주세요.

프로젝트 설정

먼저 Flutter 프로젝트를 생성하고 간단한 구조를 설정해보겠습니다.

Flutter 프로젝트 생성:
```
flutter create book_management_app
```

pubspec.yaml 파일 수정:

dependencies:
  flutter:
    sdk: flutter

Stepper 위젯 추가하기

이제 Stepper 위젯을 추가하여 도서의 권수를 입력하는 기능을 구현해보겠습니다.

lib/main.dart 파일 수정:

import 'package:flutter/material.dart';

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

class BookManagementApp extends StatefulWidget {
  @override
  _BookManagementAppState createState() => _BookManagementAppState();
}

class _BookManagementAppState extends State<BookManagementApp> {
  int _currentStep = 0;
  int _bookCount = 0;

  List<Step> _steps = [
    Step(
      title: Text('도서 선택'),
      content: Text('도서 정보'),
    ),
    Step(
      title: Text('권수 입력'),
      content: Text('도서의 권수를 입력하세요.'),
    ),
    Step(
      title: Text('완료'),
      content: Text('도서 추가가 완료되었습니다.'),
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('도서 관리 앱'),
        ),
        body: Stepper(
          steps: _steps,
          currentStep: _currentStep,
          onStepContinue: () {
            setState(() {
              if (_currentStep < _steps.length - 1) {
                _currentStep += 1;
              } else {
                // 도서 추가 완료
                print('도서 추가 완료');
              }
            });
          },
          onStepCancel: () {
            setState(() {
              if (_currentStep > 0) {
                _currentStep -= 1;
              }
            });
          },
          onStepTapped: (step) {
            setState(() {
              _currentStep = step;
            });
          },
          controlsBuilder: (BuildContext context,
              {VoidCallback onStepContinue, VoidCallback onStepCancel}) {
            return Row(
              children: [
                RaisedButton(
                  onPressed: onStepContinue,
                  child: Text('다음'),
                ),
                SizedBox(width: 10),
                RaisedButton(
                  onPressed: onStepCancel,
                  child: Text('이전'),
                ),
              ],
            );
          },
        ),
      ),
    );
  }
}

위 코드에서 BookManagementApp 클래스는 StatefulWidget를 상속받아 도서 관리 앱을 생성합니다. _currentStep 변수는 현재 선택된 스텝을 나타내고, _bookCount 변수는 사용자가 입력한 도서의 권수를 저장합니다.

_steps 리스트는 Step 위젯들의 목록을 나타내는데, 각 Step의 title은 해당 스텝의 제목, content는 해당 스텝의 내용을 나타냅니다.

Stepper 위젯은 _steps 리스트를 인자로 받아 스텝별로 화면을 렌더링하며, 사용자의 입력과 이동을 처리합니다. onStepContinue 콜백은 다음 버튼을 눌렀을 때 호출되며, _currentStep 상태를 업데이트하여 다음 스텝으로 이동합니다. onStepCancel 콜백은 이전 버튼을 눌렀을 때 호출되며, _currentStep 상태를 업데이트하여 이전 스텝으로 이동합니다.

controlsBuilder 콜백은 버튼들을 직접 커스터마이즈할 수 있도록 해줍니다.

실행 및 결과 확인

프로젝트를 실행하고 도서의 권수를 입력해보세요. 스텝별로 이동하며 도서 추가가 완료되면 ‘도서 추가 완료’ 메시지가 출력될 것입니다.

flutter run

이제 플러터의 Stepper를 사용하여 사용자가 선택한 도서의 권수를 입력하는 도서 관리 애플리케이션을 만들 수 있습니다! 코드와 결과를 참고하면서 여러분만의 도서 관리 앱을 개발해보세요.

시작하기 전에

프로젝트 설정

Stepper 위젯 추가하기

실행 및 결과 확인

참고 자료