[flutter] 플러터 커퍼티노 스테퍼를 이용한 상점 아이템 가격 조절 기능 구현하기

05 Dec 2023

flutter

이번에는 플러터(Flutter)에서 커퍼티노 스테퍼(Cupertino Stepper)를 이용하여 쇼핑 앱에서 상점 아이템의 가격을 조절할 수 있는 기능을 구현해보겠습니다. 커퍼티노 스테퍼는 iOS 스타일의 스텝 바 형태로, 간단하면서도 직관적인 사용자 경험을 제공합니다.

1. 커퍼티노 스테퍼 위젯 추가하기

먼저, 프로젝트에 필요한 의존성을 추가해주세요. pubspec.yaml 파일에 다음과 같은 내용을 추가해주세요:

dependencies:
  flutter/cupertino.dart

그리고 해당 위젯을 사용할 화면에 다음과 같이 커퍼티노 스테퍼 위젯을 추가해주세요:

import 'package:flutter/cupertino.dart';

//...

CupertinoStepper(
  value: _itemPrice,
  onChanged: (double newValue) {
    setState(() {
      _itemPrice = newValue;
    });
  },
),

위 코드에서 _itemPrice 변수는 현재 아이템 가격을 저장하는 변수입니다. onChanged 콜백은 사용자가 스테퍼를 조절할 때마다 호출되며, _itemPrice 변수의 값을 업데이트합니다.

2. 아이템 가격 표시하기

스테퍼 위젯 아래에 현재 아이템 가격을 표시해주는 기능을 추가해보겠습니다. 다음과 같이 코드를 추가해주세요:

Text('가격: \$${_itemPrice.toStringAsFixed(2)}'),

위 코드는 _itemPrice 변수를 소수점 2자리까지 표시하며, 화폐 단위를 추가하여 텍스트 위젯에 표시합니다.

3. 전체 코드 샘플

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class ShopItemPriceAdjustmentScreen extends StatefulWidget {
  @override
  _ShopItemPriceAdjustmentScreenState createState() =>
      _ShopItemPriceAdjustmentScreenState();
}

class _ShopItemPriceAdjustmentScreenState
    extends State<ShopItemPriceAdjustmentScreen> {
  double _itemPrice = 10.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('아이템 가격 조절'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('가격: \$${_itemPrice.toStringAsFixed(2)}'),
            SizedBox(height: 30),
            CupertinoStepper(
              value: _itemPrice,
              onChanged: (double newValue) {
                setState(() {
                  _itemPrice = newValue;
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}

이제 상점 앱에서 커퍼티노 스테퍼를 이용하여 아이템의 가격을 조절할 수 있는 기능이 추가되었습니다. 사용자는 스테퍼를 조절하여 원하는 가격으로 설정할 수 있고, 화면에는 실시간으로 가격이 업데이트됩니다.

더 많은 기능을 추가하거나 커스터마이징하고 싶다면, 플러터 공식 문서와 예제 코드를 참고해보시기 바랍니다.

1. 커퍼티노 스테퍼 위젯 추가하기

2. 아이템 가격 표시하기

3. 전체 코드 샘플

참고 자료