[flutter] 플러터 Stepper를 사용하여 노래나 음악 볼륨 조절 기능이 있는 음악 플레이어 애플리케이션을 만들어보자.

07 Dec 2023

flutter

플러터(Flutter)는 구글에서 개발한 UI 프레임워크로, 하나의 코드베이스로 iOS와 Android를 모두 지원할 수 있습니다. 이번 블로그 포스트에서는 플러터의 Stepper 위젯을 사용하여 음악 플레이어 애플리케이션을 만들어보는 방법에 대해 알아보겠습니다.

Stepper란?

Stepper는 사용자가 순차적으로 값을 조절할 수 있는 위젯입니다. 따라서 음악 플레이어를 만들 때 사용자가 노래나 음악의 볼륨을 조절할 수 있도록 Stepper를 활용할 수 있습니다.

프로젝트 설정

먼저 플러터 프로젝트를 생성해야 합니다. 터미널에서 다음 명령어를 실행하여 프로젝트를 생성합니다.

flutter create music_player

프로젝트 생성이 완료되면 lib/main.dart 파일을 열고 다음과 같이 수정합니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Music Player',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MusicPlayerPage(),
    );
  }
}

class MusicPlayerPage extends StatefulWidget {
  @override
  _MusicPlayerPageState createState() => _MusicPlayerPageState();
}

class _MusicPlayerPageState extends State<MusicPlayerPage> {
  double volume = 0.5;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Music Player'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(
            'Volume',
            style: TextStyle(fontSize: 20),
          ),
          SizedBox(
            height: 10,
          ),
          Stepper(
            value: volume,
            min: 0,
            max: 1,
            step: 0.1,
            onChanged: (newValue) {
              setState(() {
                volume = newValue;
              });
            },
          ),
          SizedBox(
            height: 10,
          ),
          Text(
            'Current Volume: $volume',
            style: TextStyle(fontSize: 16),
          ),
        ],
      ),
    );
  }
}

위 코드는 MusicPlayerPage 클래스에 Stepper를 추가한 예시입니다. Stepper 위젯은 현재 볼륨을 나타내는 volume 변수를 사용하여 값을 조절합니다.

앱을 실행하면 Stepper를 사용하여 볼륨을 조절할 수 있습니다.

마무리

이번 블로그 포스트에서는 플러터의 Stepper를 사용하여 음악 플레이어 애플리케이션을 만드는 방법에 대해 알아보았습니다. Stepper를 응용하여 다양한 UI 요소를 만들어보세요.