[flutter] 플러터 커퍼티노 스테퍼를 이용한 손 떨림 보정 기능 구현하기

05 Dec 2023

flutter

이번 튜토리얼에서는 Flutter의 Cupertino 스테퍼를 사용하여 손 떨림 보정 기능을 구현하는 방법에 대해 알아보겠습니다. 손 떨림 보정은 사용자가 슬라이더나 스크롤 등을 조작할 때, 손의 떨림으로 인한 정확도 문제를 해결하기 위해 사용됩니다.

1. Cupertino 스테퍼란?

Cupertino 스테퍼는 iOS의 네이티브 스타일을 따르는 플러터 위젯입니다. 스테퍼는 값을 증가 또는 감소할 수 있는 동작을 제공하며, 사용자의 입력을 감지하여 해당 값을 업데이트합니다.

2. 프로젝트 설정

플러터 앱 프로젝트를 생성한 후, pubspec.yaml 파일에서 Cupertino 패키지를 추가해주세요:

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.3

이제 의존성을 업데이트하기 위해 터미널에서 flutter pub get 명령어를 실행하세요.

3. 손 떨림 보정 기능 구현하기

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

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  double _value = 0.0; // 스테퍼의 초기값

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text('손 떨림 보정'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              CupertinoButton(
                child: Icon(Icons.add),
                onPressed: () {
                  setState(() {
                    _value += 0.1; // 버튼을 클릭할 때마다 값을 0.1씩 증가
                  });
                },
              ),
              SizedBox(height: 16),
              CupertinoStepper(
                value: _value,
                onChanged: (newValue) {
                  setState(() {
                    _value = newValue;
                  });
                },
              ),
              SizedBox(height: 16),
              Text('떨림 보정 값: $_value'),
            ],
          ),
        ),
      ),
    );
  }
}

4. 코드 설명

위의 코드에서, MyApp 클래스는 StatefulWidget를 상속하고, _MyAppState 클래스를 생성하여 앱의 상태를 관리합니다. _value 변수는 스테퍼 컨트롤의 값으로 사용됩니다.

build 메소드에서는 CupertinoButton 위젯을 사용하여 값을 증가시키는 버튼을 생성합니다. 버튼을 클릭할 때마다 _value의 값을 0.1씩 증가시킵니다.

그 아래에서 CupertinoStepper 위젯을 사용하여 스테퍼를 생성합니다. value 속성은 현재의 스테퍼 값으로 설정되고, onChanged 콜백은 스테퍼 값이 변경될 때 호출됩니다. 이 콜백에서는 _value의 값을 새로운 값으로 업데이트합니다.

마지막으로, 스테퍼 아래에는 현재 보정 값인 _value를 출력하는 텍스트 위젯을 추가했습니다.

5. 실행 결과

위의 코드를 실행하면, 아래와 같이 버튼과 스테퍼가 표시되고, 버튼을 클릭하거나 스테퍼를 조작함에 따라 값이 증가되는 것을 확인할 수 있습니다. 떨림 보정 값은 텍스트로 표시됩니다.

손 떨림 보정 기능

6. 마무리

플러터의 Cupertino 스테퍼를 사용하여 손 떨림 보정 기능을 구현하는 방법에 대해 알아보았습니다. 이러한 기능을 통해 사용자의 정확도 문제를 해결하고, 더 나은 사용자 경험을 제공할 수 있습니다.