[flutter] Card 위젯을 이용한 음악 플레이어 화면 구성하기

12 Dec 2023

flutter

음악 플레이어 앱은 많은 사람들이 일상 속에서 즐겨 사용하는 앱 중 하나입니다. 이번에는 Flutter를 사용하여 간단한 음악 플레이어 앱을 만들어보겠습니다.

1. 프로젝트 설정

먼저, Flutter 개발 환경이 설치되어 있다고 가정합니다. 만약 설치되어 있지 않다면, Flutter 공식 문서를 참고하여 설치해주세요.

프로젝트를 생성한 후, pubspec.yaml 파일에 다음과 같이 audioplayers 패키지를 추가합니다.

dependencies:
  audioplayers: ^0.20.1

이제 터미널에서 flutter pub get 명령어를 실행하여 패키지를 다운로드하고, 앱을 빌드해봅시다.

2. UI 디자인

음악 플레이어 화면을 구성하기 위해 Card 위젯을 사용하겠습니다. Card 위젯을 이용하면 간단하게 깔끔한 디자인을 구현할 수 있습니다.

다음은 음악 플레이어 화면을 구성하는 예시 코드입니다.

import 'package:flutter/material.dart';

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

class MusicPlayerApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('음악 플레이어'),
        ),
        body: Center(
          child: Card(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                const ListTile(
                  leading: Icon(Icons.album),
                  title: Text('곡 제목'),
                  subtitle: Text('가수명'),
                ),
                ButtonBar(
                  children: <Widget>[
                    IconButton(
                      icon: const Icon(Icons.play_arrow),
                      onPressed: () {},
                    ),
                    IconButton(
                      icon: const Icon(Icons.pause),
                      onPressed: () {},
                    ),
                  ],
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

위 코드에서 Card 위젯을 이용하여 음악 플레이어 화면을 구성했습니다. ListTile 위젯을 사용하여 곡 제목과 가수명을 표시하고, ButtonBar 위젯을 사용하여 재생 및 일시정지 버튼을 구현하였습니다.

3. 음악 재생 기능 추가

이어서, audioplayers 패키지를 사용하여 음악을 재생할 수 있는 기능을 추가해보겠습니다. 해당 패키지를 이용하면 간단하게 음악을 제어할 수 있습니다.

아래는 음악을 재생하고 일시정지하는 예시 코드입니다.

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

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

class MusicPlayerApp extends StatelessWidget {
  AudioPlayer audioPlayer = AudioPlayer();

  playMusic() async {
    int result = await audioPlayer.play('https://example.com/music.mp3');
    if (result == 1) {
      // success
    }
  }

  pauseMusic() {
    audioPlayer.pause();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('음악 플레이어'),
        ),
        body: Center(
          child: Card(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                const ListTile(
                  leading: Icon(Icons.album),
                  title: Text('곡 제목'),
                  subtitle: Text('가수명'),
                ),
                ButtonBar(
                  children: <Widget>[
                    IconButton(
                      icon: const Icon(Icons.play_arrow),
                      onPressed: () {
                        playMusic();
                      },
                    ),
                    IconButton(
                      icon: const Icon(Icons.pause),
                      onPressed: () {
                        pauseMusic();
                      },
                    ),
                  ],
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

위 코드에서 audioplayers 패키지를 사용하여 음악을 재생하고 일시정지하는 기능을 추가했습니다. playMusic 함수에서는 audioPlayer 객체를 이용하여 음악을 재생하고, pauseMusic 함수에서는 음악을 일시정지시킵니다.

이제 음악 플레이어 앱이 완성되었습니다!

이제 음악 플레이어 앱이 완성되었습니다! 만약 추가적으로 다른 기능을 구현하고 싶다면 Flutter 공식 문서를 참고하여 더 많은 기능을 추가해보세요.