[flutter] 플러터 슬라이딩 패널 음악 플레이어

이번 블로그에서는 Flutter를 사용하여 슬라이딩 패널을 생성하고 음악 플레이어를 구현하는 방법에 대해 알아보겠습니다.

슬라이딩 패널 생성하기

먼저, Flutter의 SlidingUpPanel 패키지를 사용하여 슬라이딩 패널을 생성합니다. 이 패키지는 많은 사용자 인터페이스를 구현하는 데 도움이 되는 다양한 기능을 제공합니다. 다음은 SlidingUpPanel 패키지를 사용하는 방법입니다.

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

class MySlidingPanel extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SlidingUpPanel(
        panel: Center(
          child: Text('슬라이딩 패널'),
        ),
        collapsed: Container(
          color: Colors.yellow,
          child: Center(
            child: Text('축소된 패널'),
          ),
        ),
        body: Center(
          child: Text('메인 화면'),
        ),
      ),
    );
  }
}

위의 코드 예시에서는 SlidingUpPanelpanel 속성에 패널에 표시할 위젯을 정의하고, collapsed 속성에는 패널이 축소되었을 때 표시할 위젯을 정의합니다. body 속성에는 패널을 제외한 메인 화면에 표시할 위젯을 정의합니다.

음악 플레이어 구현하기

이제 음악 플레이어를 구현해보겠습니다. Flutter의 audioplayer 패키지를 사용하여 음악을 재생하고 제어할 수 있습니다. 다음은 audioplayer 패키지를 사용하는 방법입니다.

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

class MyAudioPlayer extends StatefulWidget {
  @override
  _MyAudioPlayerState createState() => _MyAudioPlayerState();
}

class _MyAudioPlayerState extends State<MyAudioPlayer> {
  AudioPlayer audioPlayer = AudioPlayer();

  @override
  void initState() {
    super.initState();
    // 음악 파일 로드 및 재생 시작
    audioPlayer.load('audio.mp3');
    audioPlayer.play();
  }

  @override
  void dispose() {
    super.dispose();
    // 음악 플레이어 해제
    audioPlayer.stop();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text('음악 플레이어'),
      ),
    );
  }
}

위의 코드 예시에서는 audioplayer 패키지의 AudioPlayer 클래스를 사용하여 음악 파일을 로드하고 재생합니다. initState 메서드에서 음악 파일을 로드하고 재생을 시작하며, dispose 메서드에서 음악 플레이어를 해제합니다.

슬라이딩 패널과 음악 플레이어 통합하기

이제 슬라이딩 패널과 음악 플레이어를 통합하여 완성된 음악 플레이어 앱을 만들어봅시다. 다음은 슬라이딩 패널과 음악 플레이어를 통합하는 방법입니다.

import 'package:flutter/material.dart';
import 'package:sliding_up_panel/sliding_up_panel.dart';
import 'package:audioplayer/audioplayer.dart';

class MyMusicPlayer extends StatefulWidget {
  @override
  _MyMusicPlayerState createState() => _MyMusicPlayerState();
}

class _MyMusicPlayerState extends State<MyMusicPlayer> {
  PanelController panelController = PanelController();
  AudioPlayer audioPlayer = AudioPlayer();

  @override
  void initState() {
    super.initState();
    audioPlayer.load('audio.mp3');
    audioPlayer.play();
  }

  @override
  void dispose() {
    super.dispose();
    audioPlayer.stop();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SlidingUpPanel(
        controller: panelController,
        panel: Center(
          child: Text('슬라이딩 패널'),
        ),
        collapsed: GestureDetector(
          onTap: () {
            panelController.open();
          },
          child: Container(
            color: Colors.yellow,
            child: Center(
              child: Text('축소된 패널'),
            ),
          ),
        ),
        body: Center(
          child: Text('음악 플레이어'),
        ),
      ),
    );
  }
}

위의 코드 예시에서는 PanelController를 사용하여 슬라이딩 패널을 제어하고, onTap 이벤트를 사용하여 패널을 열도록 구현했습니다. 그리고 음악 플레이어를 메인 화면으로 설정했습니다.

마무리

이번 블로그에서는 Flutter를 사용하여 슬라이딩 패널을 생성하고 음악 플레이어를 구현하는 방법을 알아보았습니다. 슬라이딩 패널과 음악 플레이어를 통합하여 완성된 음악 플레이어 앱을 만들 수 있습니다. 위에서 소개한 코드는 기본 예시입니다. 실제 앱 개발에는 추가적인 기능과 디자인을 적용할 수 있습니다.

참고 자료