[flutter] 플러터 커퍼티노 스테퍼를 이용한 상품 수량 선택 기능 구현하기

05 Dec 2023

flutter

플러터는 크로스 플랫폼 모바일 앱 개발에 사용되는 인기 있는 프레임워크입니다. 이번에는 플러터의 커퍼티노 스테퍼(Stepper)를 사용하여 상품 수량 선택 기능을 구현하는 방법을 알아보겠습니다.

1. 커퍼티노 스테퍼란?

커퍼티노 스테퍼는 iOS에 기본적으로 제공되는 UI 요소로, 수량이나 값의 증감을 선택할 때 사용됩니다. 터치하여 증가 또는 감소할 수 있으며, 애니메이션과 함께 선택된 값이 표시됩니다.

2. 상품 수량 선택 기능 구현하기

먼저, 플러터의 cupertino 패키지를 사용하기 위해 pubspec.yaml 파일에 해당 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2

다음으로, main.dart 파일에서 필요한 클래스와 함수를 import 해주고, MyApp 클래스를 정의합니다.

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('상품 수량 선택'),
        ),
        body: ProductQuantity(),
      ),
    );
  }
}

이제 ProductQuantity 위젯을 만들어서 커퍼티노 스테퍼를 추가해줍니다.

class ProductQuantity extends StatefulWidget {
  @override
  _ProductQuantityState createState() => _ProductQuantityState();
}

class _ProductQuantityState extends State<ProductQuantity> {
  int quantity = 1;

  void increment() {
    setState(() {
      quantity++;
    });
  }

  void decrement() {
    setState(() {
      if (quantity > 1) {
        quantity--;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          CupertinoButton(
            child: Text('-'),
            onPressed: decrement,
          ),
          SizedBox(width: 16.0),
          Text('$quantity', style: TextStyle(fontSize: 24.0)),
          SizedBox(width: 16.0),
          CupertinoButton(
            child: Text('+'),
            onPressed: increment,
          ),
        ],
      ),
    );
  }
}

_ProductQuantityState 클래스에서는 수량을 저장할 quantity 변수를 선언하고, increment와 decrement 함수를 정의하여 수량을 증가 또는 감소시킵니다. build 메소드에서는 커퍼티노 버튼을 사용하여 수량을 선택할 수 있도록 UI를 구성합니다.

마지막으로, main.dart 파일을 실행하여 상품 수량 선택 기능을 확인해봅니다.

3. 결론

플러터의 커퍼티노 스테퍼를 활용하여 상품 수량 선택 기능을 구현하는 방법을 알아보았습니다. 이를 응용하여 다양한 UI 요소를 구현할 수 있으며, 플러터의 다른 기능과 조합하여 앱의 사용자 경험을 향상시킬 수 있습니다. 자세한 내용은 플러터 공식 문서를 참고하시기 바랍니다.