[flutter] 플러터 Stepper를 사용하여 사용자가 선택한 수량과 가격으로 총 가격을 계산하는 쇼핑 카트 애플리케이션을 만들어보자.

07 Dec 2023

flutter

개요

이번 튜토리얼에서는 Flutter의 Stepper 위젯을 사용하여 사용자가 선택한 수량과 가격으로 총 가격을 계산하는 쇼핑 카트 애플리케이션을 만들어보겠습니다.

세팅하기

먼저, Flutter 개발 환경을 세팅해야 합니다. Flutter SDK를 설치하고 안드로이드 에뮬레이터나 iOS 시뮬레이터를 설정해주세요.

프로젝트 생성하기

Flutter SDK가 설치되었다면, 다음 명령어를 사용하여 Flutter 프로젝트를 생성합니다.

flutter create shopping_cart_app

프로젝트 생성이 완료되면, 프로젝트 폴더로 이동합니다.

cd shopping_cart_app

프로젝트 구조

프로젝트 구조는 다음과 같습니다.

shopping_cart_app/
  ├── lib/
  │   ├── main.dart
  ├── pubspec.yaml
  ├── android/
  ├── ios/
  └── ...

UI 디자인

애플리케이션의 UI를 디자인합니다. 이 예제에서는 Stepper 위젯을 사용하여 사용자가 선택하는 제품 수량을 입력하고, 가격을 계산하는 기능을 구현합니다.

import 'package:flutter/material.dart';

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

class ShoppingCartApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Shopping Cart App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ShoppingCartScreen(),
    );
  }
}

class ShoppingCartScreen extends StatefulWidget {
  @override
  _ShoppingCartScreenState createState() => _ShoppingCartScreenState();
}

class _ShoppingCartScreenState extends State<ShoppingCartScreen> {
  int _quantity = 1;
  double _price = 10.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Shopping Cart'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Selected Quantity: $_quantity',
              style: TextStyle(fontSize: 20.0),
            ),
            Text(
              'Total Price: \$${_quantity * _price}',
              style: TextStyle(fontSize: 20.0),
            ),
            SizedBox(height: 20),
            Stepper(
              value: _quantity,
              onChanged: (value) {
                setState(() {
                  _quantity = value;
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}

실행하기

위 코드를 main.dart 파일에 붙여넣고, 애플리케이션을 실행합니다.

flutter run

실행 후에는 애플리케이션에서 사용자가 수량을 선택하면 선택한 수량과 계산된 총 가격이 화면에 표시됩니다.

정리

이번에는 Flutter의 Stepper 위젯을 사용하여 사용자가 선택한 수량과 가격으로 총 가격을 계산하는 쇼핑 카트 애플리케이션을 만들어보았습니다. Stepper 위젯은 많은 사용자 입력을 받을 때 유용하게 사용될 수 있습니다.