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

05 Dec 2023

flutter

플루터(Flutter)는 Google에서 제공하는 UI 프레임워크로, 다양한 플랫폼에서 동작하는 애플리케이션을 개발할 수 있습니다. 이번에는 플루터의 커퍼티노 스테퍼(Cupertino Stepper)를 이용하여 플레이어의 속도를 조절하는 기능을 구현해보겠습니다.

필요한 패키지 설치하기

먼저, 플러터 프로젝트에서 커퍼티노 스테퍼를 사용하기 위해 cupertino_icons 패키지를 설치해야 합니다. pubspec.yaml 파일의 dependencies 섹션에 다음과 같이 패키지를 추가해주세요:

dependencies:
  cupertino_icons: ^1.0.2

플레이어 속도 조절 UI 추가하기

플레이어 속도 조절을 위한 UI를 추가하기 위해, 기존의 위젯 트리에 CupertinoStepper 위젯을 추가해야 합니다. 예를 들어, 다음과 같이 CupertinoStepper를 사용하여 속도 값을 조절하는 UI를 만들어보겠습니다:

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

class PlayerSpeedControl extends StatefulWidget {
  @override
  _PlayerSpeedControlState createState() => _PlayerSpeedControlState();
}

class _PlayerSpeedControlState extends State<PlayerSpeedControl> {
  double _playerSpeed = 1.0;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text(
          '플레이어 속도',
          style: TextStyle(fontSize: 18),
        ),
        SizedBox(height: 10),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            CupertinoButton(
              onPressed: () {
                setState(() {
                  _playerSpeed -= 0.1;
                  if (_playerSpeed < 0.1) {
                    _playerSpeed = 0.1;
                  }
                });
              },
              child: Icon(CupertinoIcons.minus_circled),
            ),
            SizedBox(width: 10),
            Text(
              _playerSpeed.toStringAsFixed(1),
              style: TextStyle(fontSize: 20),
            ),
            SizedBox(width: 10),
            CupertinoButton(
              onPressed: () {
                setState(() {
                  _playerSpeed += 0.1;
                  if (_playerSpeed > 2.0) {
                    _playerSpeed = 2.0;
                  }
                });
              },
              child: Icon(CupertinoIcons.plus_circled),
            ),
          ],
        ),
      ],
    );
  }
}

사용 예시

위의 PlayerSpeedControl 위젯을 사용하여 플레이어 속도 조절 UI를 생성하고 플레이어 속도 값을 가져올 수 있습니다. 예를 들어, 다음과 같이 사용해볼 수 있습니다:

PlayerSpeedControl playerSpeedControl = PlayerSpeedControl();

playerSpeedControl._playerSpeed // 현재 플레이어 속도 값을 가져옴

결론

위의 코드를 통해, 플루터 커퍼티노 스테퍼를 이용하여 간단한 플레이어 속도 조절 기능을 구현하는 방법을 알아보았습니다. 커퍼티노 스테퍼를 사용하면 iOS 스타일의 UI를 플루터 앱에 쉽게 적용할 수 있습니다. 다양한 스테퍼 설정 옵션을 활용하여 보다 유연하고 다양한 UI를 구현할 수 있으니, 참고해보세요!

참고 자료

Cupertino Stepper - Flutter documentation