이번에는 Flutter의 Stepper 위젯을 사용하여 사용자가 선택한 이벤트 기간에 따른 영화 상영 정보를 표시하는 영화 예매 애플리케이션을 만들어 보겠습니다.

Stepper 위젯 개요

Stepper는 사용자가 단계별로 진행하는 작업을 표현할 때 사용되는 위젯입니다. 각 단계마다 사용자가 입력해야 할 정보를 받거나, 선택할 수 있는 옵션을 제공할 수 있습니다.

Stepper는 일련의 Step 위젯으로 구성되며, 각각의 Step은 제목, 내용, 작업 버튼 등을 포함할 수 있습니다. 이러한 Stepper 위젯을 활용하여 사용자가 선택한 이벤트 기간에 따라 상영하는 영화 목록을 보여주는 기능을 구현해보겠습니다.

프로젝트 구성

본 예제 프로젝트는 다음과 같이 구성됩니다.

1. 프로젝트 생성 및 기본 설정
2. Stepper 위젯 추가
3. 각 단계에 필요한 정보 입력
4. 영화 목록 표시

프로젝트 생성 및 기본 설정

먼저, Flutter 프로젝트를 생성하고 기본 설정을 완료합니다. 이 단계에서는 애플리케이션의 구조를 설정하고 필요한 의존성을 추가합니다. 자세한 내용은 Flutter 공식 문서를 참고하세요.

Stepper 위젯 추가

프로젝트의 구조를 완성한 후, 애플리케이션의 화면에 Stepper 위젯을 추가합니다. Stepper 위젯은 stepper.dart 파일에 작성합니다.

import 'package:flutter/material.dart';

class MovieReservationStepper extends StatefulWidget {
  @override
  _MovieReservationStepperState createState() => _MovieReservationStepperState();
}

class _MovieReservationStepperState extends State<MovieReservationStepper> {
  int _currentStep = 0;

  List<Step> _steps = [
    Step(
      title: Text('단계 1'),
      content: Text('이벤트 기간을 선택하세요.'),
    ),
    Step(
      title: Text('단계 2'),
      content: Text('영화를 선택하세요.'),
    ),
    Step(
      title: Text('단계 3'),
      content: Text('예매 내역을 확인하세요.'),
    ),
  ];

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

각 단계에 필요한 정보 입력

제목과 내용이 있는 각 단계에 필요한 정보를 입력하는 작업을 진행합니다. 본 예제에서는 단순히 텍스트로 표시하였지만, 필요에 따라 사용자 입력 필드나 버튼을 추가할 수 있습니다.

영화 목록 표시

Stepper 위젯을 통해 사용자가 선택한 이벤트 기간에 따라 상영하는 영화 목록을 표시합니다. 예를 들어, 반복문을 사용하여 각 단계에 대한 정보를 입력하고, 선택한 이벤트 기간에 해당하는 영화 목록을 API를 통해 가져온 후 리스트 형태로 표시합니다.

이와 같이 Stepper를 활용하여 사용자의 선택에 따라 동적으로 화면을 변경하는 기능을 구현할 수 있습니다.

마치며

이번 글에서는 Flutter의 Stepper를 사용하여 영화 예매 애플리케이션을 만들어 보았습니다. Stepper를 활용하면 사용자의 작업을 단계적으로 진행하고, 필요한 정보를 입력하거나 선택할 수 있는 기능을 쉽게 구현할 수 있습니다.

더 많은 Flutter 관련 정보와 예제는 Flutter 공식 문서 및 Flutter 앱 개발 가이드를 참고하시기 바랍니다.