이번 포스트에서는 Flutter의 Cupertino 스테퍼(Cupertino Stepper)를 활용하여 픽커(Picker) 기능을 구현하는 방법에 대해 알아보겠습니다. 픽커는 사용자가 값을 선택할 수 있는 위젯으로, 예를 들어 날짜, 시간, 숫자 등을 선택할 수 있는 기능을 제공합니다.

1. Cupertino 패키지 추가하기

먼저, 이 기능을 구현하기 위해 Cupertino 패키지를 추가해야 합니다. pubspec.yaml 파일에 다음과 같이 Cupertino 패키지를 추가해주세요.

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2

Cupertino 스테퍼를 사용하기 위해 cupertino_icons 패키지도 추가해야 합니다.

2. 픽커 위젯 생성하기

픽커 위젯을 생성하기 위해서는 CupertinoPicker를 사용합니다. CupertinoPicker는 아이템 목록에서 값을 선택하도록 도와주는 위젯입니다.

먼저 CupertinoPicker를 사용하기 위해 CupertinoPicker.builder 생성자를 사용하여 위젯을 생성합니다. 이 생성자는 itemBuilder 콜백을 통해 각 아이템과 인덱스를 생성할 수 있습니다.

아래는 간단한 숫자 선택 픽커를 구현한 예제입니다.

CupertinoPicker.builder(
  itemExtent: 40,
  onSelectedItemChanged: (value) {
    // 선택된 아이템이 변경되었을 때 수행할 작업
  },
  itemBuilder: (context, index) {
    // 각 아이템의 모습을 정의하는 위젯 리턴
    return Text(
      '${index + 1}',
      style: TextStyle(fontSize: 20),
    );
  },
)

• itemExtent는 픽커의 높이를 설정합니다.
• onSelectedItemChanged는 사용자가 아이템을 선택했을 때 호출되는 콜백 함수입니다.
• itemBuilder에서는 각 아이템의 모습을 정의하는 위젯을 리턴해야 합니다.

3. Cupertino 스테퍼 구현하기

이제 픽커를 개별로 사용하는 것보다는 더 많은 기능을 제공하는 Cupertino 스테퍼를 구현해보겠습니다.

int selectedValue = 0;

CupertinoStepper(
  value: selectedValue,
  onChanged: (value) {
    setState(() {
      selectedValue = value;
    });
  },
  itemHeight: 50,
  initialItemCount: 10,
  itemBuilder: (context, index) {
    return Text(
      '$index',
      style: TextStyle(fontSize: 20),
    );
  },
)

• value는 현재 선택된 값입니다.
• onChanged는 해당 스테퍼의 값이 변경되었을 때 호출되는 콜백 함수입니다.
• itemHeight는 아이템의 높이를 설정합니다.
• initialItemCount는 아이템의 개수를 설정합니다.
• itemBuilder에서는 각 아이템의 모습을 정의하는 위젯을 리턴해야 합니다.

마무리

이번 포스트에서는 Flutter의 Cupertino 스테퍼를 사용하여 픽커 기능을 구현하는 방법에 대해 알아보았습니다. 이를 통해 픽커를 사용하는 다양한 기능을 구현할 수 있으며, 사용자가 값 선택에 용이한 경험을 제공할 수 있습니다.

더 자세한 내용은 Flutter 공식 문서를 참고하시기 바랍니다.