[flutter] 플러터 커퍼티노 스테퍼를 이용한 터치 감도 조절 기능 구현하기

05 Dec 2023

flutter

플러터(Flutter)는 Google에서 개발한 크로스 플랫폼 모바일 앱 개발 프레임워크입니다. Flutter를 사용하면 iOS와 Android 모두에서 동작하는 앱을 손쉽게 개발할 수 있습니다. 이번 포스트에서는 플러터 커퍼티노 스테퍼(Cupertino Stepper)를 이용하여 터치 감도를 조절하는 기능을 구현하는 방법에 대해 알아보겠습니다.

플러터 커퍼티노 스테퍼 사용하기

커퍼티노 스테퍼는 iOS 스타일의 스테퍼 위젯으로, 터치 감도 조절과 같은 사용자 인터랙션을 구현할 때 효과적입니다. 플러터 프로젝트에서 커퍼티노 스테퍼를 사용하기 위해 먼저 cupertino_icons 패키지를 프로젝트에 추가해야 합니다.

pubspec.yaml 파일을 열고 dependencies 섹션에 cupertino_icons: ^1.0.2를 추가합니다.
패키지를 가져오기 위해 터미널에서 flutter pub get 명령을 실행합니다.

이제 커퍼티노 스테퍼를 사용할 준비가 되었습니다.

터치 감도 조절 기능 구현하기

터치 감도 조절 기능을 구현하기 위해 하나의 변수를 사용하여 스테퍼의 값을 저장하고 화면에 표시합니다. 사용자가 스테퍼를 조작하면 해당 변수의 값이 업데이트되고, 이 값을 활용하여 터치 감도를 조절할 수 있습니다. 아래는 간단한 예제 코드입니다.

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

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

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

class _MyAppState extends State<MyApp> {
  double touchSensitivity = 0.5; // 터치 감도 값 초기화

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Touch Sensitivity'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              CupertinoStepper(
                value: touchSensitivity,
                onChanged: (value) {
                  setState(() {
                    touchSensitivity = value;
                  });
                },
              ),
              Text(
                '터치 감도: ${touchSensitivity.toStringAsFixed(2)}',
                style: TextStyle(fontSize: 20),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

위 예제 코드에서는 CupertinoStepper를 통해 커퍼티노 스테퍼를 만들고, value 속성을 통해 현재 터치 감도 값을 설정합니다. onChanged 콜백은 스테퍼가 조작될 때마다 호출되며, 해당 값을 업데이트합니다.

화면에는 스테퍼와 터치 감도를 나타내는 텍스트가 표시됩니다. 터치 감도를 조절할 때마다 텍스트의 값도 업데이트되며, toStringAsFixed(2)를 사용하여 소수점 아래 두 자리까지만 표시되도록 설정했습니다.

이제 앱을 실행하면 커퍼티노 스테퍼를 사용하여 터치 감도를 조절할 수 있는 화면이 표시됩니다. 사용자는 스테퍼를 조작하여 터치 감도 값을 변경할 수 있습니다.

결론

이번 포스트에서는 플러터 커퍼티노 스테퍼를 사용하여 터치 감도 조절 기능을 구현하는 방법에 대해 알아보았습니다. 커퍼티노 스테퍼를 통해 iOS 스타일의 사용자 인터랙션을 구현할 수 있으며, 이를 활용하여 다양한 기능을 개발할 수 있습니다. 플러터에서는 다양한 위젯을 활용하여 유저 인터페이스를 만들 수 있기 때문에, 개발자들은 많은 효율성과 생산성을 얻을 수 있습니다.

Flutter 공식 문서 - CupertinoStepper