[flutter] 플러터 커퍼티노 스테퍼를 이용한 소리 크기 조절 기능 구현하기

05 Dec 2023

flutter

플러터(Flutter)에서는 커퍼티노(Cupertino) 디자인을 제공하여 iOS 스타일의 UI를 구현할 수 있습니다. 이번 포스트에서는 플러터의 커퍼티노 스테퍼(Cupertino Stepper)를 이용하여 소리 크기를 조절하는 기능을 구현하는 방법에 대해 알아보겠습니다.

커퍼티노 스테퍼란?

커퍼티노 스테퍼는 iOS의 스타일을 따르는 스테퍼 위젯으로, 숫자 값을 증가 또는 감소시킬 수 있는 기능을 제공합니다. 사용자는 스테퍼의 추가, 감소 버튼을 터치하거나 스테퍼 위젯을 드래그하여 값을 조절할 수 있습니다.

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

먼저, cupertino_icons 패키지를 프로젝트에 추가하고 임포트해야 합니다. pubspec.yaml 파일에서 dependencies 섹션에 cupertino_icons 패키지를 추가한 후, pubspec.lock 파일을 업데이트합니다.

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.3

이제 다음과 같이 main.dart 파일에 코드를 작성해보겠습니다.

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      home: MyHomePage(),
    );
  }
}

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

class _MyHomePageState extends State<MyHomePage> {
  double _volume = 50;

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: Text('Volume Control'),
      ),
      child: Container(
        padding: EdgeInsets.all(16),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'Current Volume: $_volume',
              style: TextStyle(
                fontSize: 18,
                fontWeight: FontWeight.bold,
              ),
            ),
            SizedBox(height: 16),
            CupertinoSlider(
              value: _volume,
              onChanged: (value) {
                setState(() {
                  _volume = value;
                });
              },
              min: 0,
              max: 100,
            ),
          ],
        ),
      ),
    );
  }
}

위 코드에서는 MyHomePage 클래스에서 _volume 변수를 사용하여 현재 소리 크기를 저장하고 표시합니다. CupertinoSlider 위젯에서 _volume 값을 초기값으로 설정하고, 값이 변경될 때마다 setState 메서드를 호출하여 UI를 업데이트합니다.

실행 결과

코드를 실행하면 iOS 스타일의 소리 크기 조절 UI가 나타납니다. 스테퍼를 이용하여 소리 크기를 조절할 수 있으며, 현재 소리 크기를 나타내는 텍스트가 실시간으로 변경됩니다.

마무리

플러터의 커퍼티노 스테퍼를 이용하여 소리 크기 조절 기능을 구현하는 방법에 대해 알아보았습니다. 이와 같은 방법으로 다양한 iOS 디자인 요소를 플러터에서 적용할 수 있으며, 사용자 인터페이스를 좀 더 풍부하고 멋지게 만들 수 있습니다.

더 자세한 내용은 플러터 공식 문서를 참고하세요.