이번에는 플러터의 커퍼티노 스테퍼를 이용하여 컬러 선택 기능을 구현해 보겠습니다. 커퍼티노 스테퍼는 iOS 디자인 스타일을 따르는 스타일로, 많은 iOS 앱에서 사용되는 컴포넌트입니다.

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

우선, 플러터 프로젝트에 cupertino_icons 패키지를 추가해야 합니다. pubspec.yaml 파일에 아래와 같은 내용을 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2

이후, main.dart 파일에 cupertino_icons 패키지를 임포트합니다.

import 'package:cupertino_icons/cupertino_icons.dart';

이제 커퍼티노 스테퍼를 사용하기 위해 main.dart 파일의 build() 메서드 내부에 아래 코드를 추가합니다.

CupertinoStepper(
  currentStep: _currentStep,
  onStepTapped: (step) {
    setState(() {
      _currentStep = step;
    });
  },
  steps: [
    for (int i = 0; i < 5; i++)
      CupertinoStep(
        title: Text('Step $i'),
        subtitle: Text('Subtitle $i'),
        isActive: _currentStep == i,
        state: _currentStep == i ? CupertinoStepState.editing : CupertinoStepState.indexed,
        content: Container(
          color: _indexToColor(i),
          height: 200,
        ),
      ),
  ],
)

CupertinoStepper 위젯을 사용하여 커퍼티노 스테퍼를 만들고, onStepTapped 콜백 함수를 사용하여 선택된 스텝을 변경할 수 있도록 합니다. steps 속성에는 CupertinoStep 위젯을 나열하여 각 스텝에 대한 정보를 설정할 수 있습니다.

2. 컬러 선택 기능 구현하기

CupertinoStep 위젯의 content 속성에 컬러박스를 표시하고, isActive 속성을 사용하여 현재 선택된 스텝인지 확인합니다. 그리고 _indexToColor() 함수를 통해 인덱스에 따라 다른 색상을 반환하도록 설정합니다.

Color _indexToColor(int index) {
  switch (index) {
    case 0:
      return Colors.red;
    case 1:
      return Colors.blue;
    case 2:
      return Colors.green;
    case 3:
      return Colors.yellow;
    case 4:
      return Colors.orange;
    default:
      return Colors.transparent;
  }
}

이제 앱을 실행하면 커퍼티노 스테퍼가 나타나고, 각 스텝별로 다른 색상의 컬러박스가 보여집니다. 스텝을 탭하면 해당 스텝으로 이동하고, 선택된 스텝은 빨간색 컬러박스로 표시됩니다.

결론

이번 튜토리얼에서는 플러터의 커퍼티노 스테퍼를 이용하여 컬러 선택 기능을 구현하는 방법에 대해 알아보았습니다. 커퍼티노 스테퍼는 iOS 스타일의 디자인을 플러터 앱에 적용할 때 유용한 컴포넌트입니다. 다양한 UI 요소를 활용하여 다양한 기능을 구현할 수 있으니, 참고하여 사용해 보시기 바랍니다.

참고 자료:

• Flutter Cupertino Stepper
• cupertino_icons 패키지