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

05 Dec 2023

flutter

플러터에서는 커퍼티노 디자인을 적용하여 iOS 스타일의 위젯을 구현할 수 있습니다. 이번에는 커퍼티노 스테퍼를 이용하여 노래 가사의 크기를 조절하는 기능을 구현해 보겠습니다.

커퍼티노 스테퍼란?

커퍼티노 스테퍼는 iOS에서 제공하는 스테퍼 위젯으로, 숫자 값을 증감시키는 버튼을 포함한 UI를 갖추고 있습니다. 사용자가 버튼을 누르면 설정된 값이 변경되는 역할을 합니다.

프로젝트 설정

플러터 프로젝트를 생성하고, cupertino_icons 패키지를 pubspec.yaml 파일에 추가합니다.

$ flutter create lyrics_app
$ cd lyrics_app

pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.3

pubspec.lock 파일은 자동으로 생성됩니다. 이후 패키지를 가져오기 위해 다음 명령어를 실행합니다.

$ flutter pub get

노래 가사 화면 구현

lib/main.dart 파일을 열고, MaterialApp 위젯을 CupertinoApp 위젯으로 변경합니다. CupertinoApp은 커퍼티노 디자인을 적용하는 기본 앱 위젯입니다.

import 'package:flutter/cupertino.dart';

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

class LyricsApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      title: 'Lyrics App',
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: Text('Lyrics App'),
      ),
      child: Center(
        child: Text(
          'Lyrics',
          style: CupertinoTheme.of(context).textTheme.navLargeTitleTextStyle,
        ),
      ),
    );
  }
}

위 코드에서는 CupertinoApp으로 앱의 기본 위젯을 설정하고, CupertinoPageScaffold를 사용하여 노래 가사를 표시하는 화면을 구성합니다. 여기서는 Text 위젯을 사용하여 “Lyrics”라는 텍스트를 화면 가운데에 표시합니다.

가사 크기 조절 기능 추가

이제 CupertinoPageScaffold 위젯의 child에 커퍼티노 스테퍼를 추가하여 가사 크기를 조절할 수 있는 기능을 구현해 보겠습니다.

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  double lyricSize = 16.0;

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: Text('Lyrics App'),
      ),
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'Lyrics',
              style: TextStyle(fontSize: lyricSize),
            ),
            SizedBox(height: 16.0),
            CupertinoSlider(
              value: lyricSize,
              min: 12.0,
              max: 30.0,
              divisions: 18,
              onChanged: (newValue) {
                setState(() {
                  lyricSize = newValue;
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}

위 코드에서는 lyricSize라는 변수를 사용하여 가사의 크기를 관리합니다. CupertinoSlider를 사용하여 사용자가 가사 크기를 변경할 수 있도록 합니다. CupertinoSlider 위젯의 onChanged 콜백에서 setState 함수를 호출하여 lyricSize 값을 변경하고 화면을 다시 그리도록 합니다.

Column 위젯을 사용하여 가사 텍스트와 슬라이더를 수직으로 정렬하였으며, SizedBox를 사용하여 가사 텍스트와 슬라이더 사이의 간격을 지정하였습니다.

실행 및 테스트

터미널에서 다음 명령어를 실행하여 앱을 실행합니다.

$ flutter run

시뮬레이터나 디바이스에서 앱이 실행되면 노래 가사가 표시되고 슬라이더를 조절하여 가사 크기를 변경할 수 있습니다.

결론

이번 포스트에서는 플러터의 커퍼티노 스테퍼를 이용하여 노래 가사의 크기를 조절하는 기능을 구현하는 방법을 알아보았습니다. 커퍼티노 디자인을 적용하여 iOS 스타일의 UI를 만들 수 있다는 점을 기억해 두세요. 플러터를 사용하여 멋진 앱을 개발하는 데 도움이 되길 바랍니다.