[flutter] 플러터 Stepper를 사용하여 사용자가 원하는 수량을 선택하는 기능이 있는 주문 애플리케이션을 만들어보자.

07 Dec 2023

flutter

이번에는 Flutter를 사용하여 주문 애플리케이션을 개발해보려고 합니다. 주문 애플리케이션은 사용자가 원하는 수량을 선택할 수 있는 기능을 가지고 있습니다. 이때, Stepper 위젯을 사용하여 구현할 수 있습니다.

Stepper 위젯

Stepper 위젯은 사용자가 단계별로 진행할 수 있는 인터페이스를 제공합니다. 각 단계는 순서에 따라 나타나며, 사용자는 이전 단계로 돌아가거나 다음 단계로 넘어갈 수 있습니다.

Stepper 위젯은 steps, currentStep, onStepContinue, onStepCancel 등의 속성을 가지고 있습니다. steps 속성은 Stepper의 각 단계에 대한 정보를 담은 StepperStep 위젯들의 리스트입니다. currentStep 속성은 현재 선택된 단계를 나타내며, onStepContinue와 onStepCancel 속성은 해당 버튼을 클릭했을 때 발생하는 이벤트를 처리하는 콜백 함수입니다.

코드 예시

import 'package:flutter/material.dart';

class OrderApp extends StatefulWidget {
  @override
  _OrderAppState createState() => _OrderAppState();
}

class _OrderAppState extends State<OrderApp> {
  int _currentStep = 0; // 현재 선택된 단계
  int _quantity = 0; // 사용자가 선택한 수량

  List<Step> _steps = [
    // Stepper의 각 단계에 대한 정보
    Step(
      title: Text("수량 선택"),
      content: Column(
        children: [
          Text("원하는 수량을 선택해주세요."),
          SizedBox(height: 16),
          Stepper(
            value: _quantity, // 현재 선택된 수량
            onChanged: (value) {
              setState(() {
                _quantity = value;
              });
            },
          ),
        ],
      ),
    ),
    Step(
      title: Text("배송 정보 입력"),
      content: Column(
        children: [
          // 배송 정보 입력 폼
        ],
      ),
    ),
    Step(
      title: Text("결제"),
      content: Column(
        children: [
          // 결제 정보 입력 폼
        ],
      ),
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("주문 애플리케이션"),
      ),
      body: Stepper(
        currentStep: _currentStep,
        steps: _steps,
        onStepContinue: () {
          if (_currentStep < _steps.length - 1) {
            setState(() {
              _currentStep += 1;
            });
          }
        },
        onStepCancel: () {
          if (_currentStep > 0) {
            setState(() {
              _currentStep -= 1;
            });
          }
        },
      ),
    );
  }
}

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

위의 코드는 수량 선택, 배송 정보 입력, 결제 세 단계로 이루어진 주문 애플리케이션을 구현한 예시입니다. 사용자는 Stepper를 통해 각 단계를 진행하고, 수량 선택 단계에서는 Stepper 위젯을 사용하여 원하는 수량을 선택할 수 있습니다.

결론

Flutter의 Stepper 위젯을 사용하면 사용자가 원하는 수량을 선택할 수 있는 주문 애플리케이션을 쉽게 구현할 수 있습니다. Stepper를 사용하여 여러 단계를 순차적으로 진행하고, 각 단계에서 필요한 정보를 입력받을 수 있습니다.