[flutter] 플러터 커퍼티노 스테퍼 사용 방법

05 Dec 2023

flutter

플러터(Flutter)는 다양한 위젯을 제공하여 개발자가 간편하게 UI를 구성할 수 있습니다. 그 중에서도 커퍼티노 스테퍼(Cupertino Stepper)는 iOS 스타일의 스테퍼 위젯으로, 사용자가 값을 증감시킬 수 있는 기능을 제공합니다. 이번 블로그에서는 플러터 커퍼티노 스테퍼의 사용 방법에 대해 알아보겠습니다.

1. 커퍼티노 스테퍼란?

커퍼티노 스테퍼는 iOS에서 잘 알려진 스테퍼 위젯으로, 원하는 값의 증감을 사용자에게 제공합니다. 이 위젯은 +와 - 버튼으로 구성되어 있으며, 사용자가 + 버튼을 누르면 값이 증가하고 - 버튼을 누르면 값이 감소합니다. 사용자 지정 증감 단위도 설정할 수 있습니다.

2. 커퍼티노 스테퍼 사용 방법

커퍼티노 스테퍼를 사용하기 위해서는 다음과 같은 단계를 따르면 됩니다.

2.1. 커퍼티노 스테퍼 위젯 추가

먼저, cupertino_icons 라이브러리를 pubspec.yaml 파일에 추가해야 합니다. 이 라이브러리는 커뮤니티에서 제공하는 아이콘을 사용할 수 있도록 해줍니다. 아래는 pubspec.yaml 파일의 예시입니다.

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^1.0.2

그리고 main.dart 파일에서 CupertinoApp 위젯을 사용하여 앱을 초기화한 다음, CupertinoStepper 위젯을 추가합니다.

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      title: 'Cupertino Stepper Example',
      theme: CupertinoThemeData(
        primaryColor: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  double _value = 0;

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: Text('Cupertino Stepper Example'),
      ),
      child: Center(
        child: iOSStepper(),
      ),
    );
  }

  Widget iOSStepper() {
    return Container(
      padding: EdgeInsets.all(16),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          CupertinoStepper(
            value: _value,
            stepValue: 0.5,
            onChanged: (newValue) {
              setState(() {
                _value = newValue;
              });
            },
          ),
          SizedBox(height: 16),
          Text('Value: $_value'),
        ],
      ),
    );
  }
}

2.2. 커퍼티노 스테퍼 속성 설정

커퍼티노 스테퍼 위젯은 다양한 속성을 설정할 수 있습니다. 가장 중요한 속성은 다음과 같습니다.

value: 현재 값
stepValue: 증감할 단위
onChanged: 값이 변경될 때 호출되는 콜백 함수

위 예제에서는 _value 변수를 사용하여 현재 값(디폴트로 0)을 저장하고, stepValue를 0.5로 설정하여 0.5씩 증감하도록 합니다. onChanged 콜백 함수에서는 값이 변경될 때마다 _value 변수를 갱신하도록 합니다.

3. 결론

이제 플러터 커퍼티노 스테퍼의 사용 방법을 알아보았습니다. 이 위젯을 사용하면 iOS 스타일의 스테퍼를 손쉽게 구현할 수 있습니다. 자세한 내용은 Flutter 공식 문서를 참고하시기 바랍니다.