[flutter] 플러터 앱에서 sticky 헤더를 사용한 음악 플레이어 만들기

30 Nov 2023

flutter

플러터(Flutter)를 사용하여 멋진 음악 플레이어 앱을 만들어보겠습니다. 이 앱은 sticky 헤더를 사용하여 플레이 리스트를 표시하고, 사용자가 음악을 선택하고 재생할 수 있도록 할 것입니다.

필요한 패키지 설치하기

다음 패키지들을 pubspec.yaml 파일에 추가해주세요.

dependencies:
  flutter_sticky_header: ^0.4.0
  audio_manager: ^0.6.1

이 패키지들은 플러터 앱에서 sticky 헤더를 구현하기 위해 필요합니다. 또한, 음악으로 작업하기 위해 audio_manager 패키지도 필요합니다.

패키지를 추가한 후에는 flutter packages get 명령어를 실행하여 패키지를 다운로드하고 세팅하는 작업을 수행해주세요.

플레이 리스트 화면 만들기

먼저, 플레이 리스트 화면을 만들어보겠습니다. 이 화면에서는 sticky 헤더를 사용하여 음악 카테고리를 표시하고, 각 카테고리에 해당하는 음악 리스트를 스크롤할 수 있게 할 것입니다.

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

class PlaylistScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('플레이리스트'),
      ),
      body: CustomScrollView(
        slivers: <Widget>[
          SliverStickyHeader(
            header: Container(
              height: 50,
              color: Colors.grey[200],
              alignment: Alignment.centerLeft,
              child: Padding(
                padding: EdgeInsets.symmetric(horizontal: 16.0),
                child: Text(
                  '히트곡',
                  style: TextStyle(fontWeight: FontWeight.bold),
                ),
              ),
            ),
            sliver: SliverList(
              delegate: SliverChildBuilderDelegate(
                (context, index) => ListTile(
                  title: Text('곡 $index'),
                ),
                childCount: 10,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

위 코드에서는 flutter_sticky_header 패키지의 SliverStickyHeader 위젯을 사용하여 sticky 헤더를 만들었습니다. SliverList 위젯을 사용하여 음악 리스트를 스크롤할 수 있게 했습니다.

음악 재생 기능 추가하기

이제 음악을 재생할 수 있는 기능을 추가해보겠습니다. audio_manager 패키지를 사용하여 음악을 제어할 것입니다.

import 'package:flutter/material.dart';
import 'package:flutter_sticky_header/flutter_sticky_header.dart';
import 'package:audio_manager/audio_manager.dart';

class PlaylistScreen extends StatefulWidget {
  @override
  _PlaylistScreenState createState() => _PlaylistScreenState();
}

class _PlaylistScreenState extends State<PlaylistScreen> {
  @override
  void initState() {
    super.initState();
    AudioManager.instance
      ..start(
        "https://example.com/audio.mp3",
        title: "제목",
        desc: "아티스트",
        cover: "https://example.com/cover.jpg",
        notificationSettings: NotificationSettings(
          seekBarEnabled: true,
          stopEnabled: true,
        ),
      );
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('플레이리스트'),
      ),
      body: CustomScrollView(
        slivers: <Widget>[
          SliverStickyHeader(
            header: Container(
              height: 50,
              color: Colors.grey[200],
              alignment: Alignment.centerLeft,
              child: Padding(
                padding: EdgeInsets.symmetric(horizontal: 16.0),
                child: Text(
                  '히트곡',
                  style: TextStyle(fontWeight: FontWeight.bold),
                ),
              ),
            ),
            sliver: SliverList(
              delegate: SliverChildBuilderDelegate(
                (context, index) => ListTile(
                  title: Text('곡 $index'),
                  onTap: () {
                    AudioManager.instance.stop();
                    AudioManager.instance.start(
                      "https://example.com/audio$index.mp3",
                      title: "곡 $index",
                      desc: "아티스트 $index",
                      cover: "https://example.com/cover$index.jpg",
                      notificationSettings: NotificationSettings(
                        seekBarEnabled: true,
                        stopEnabled: true,
                      ),
                    );
                  },
                ),
                childCount: 10,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

위 코드에서 audio_manager 패키지의 AudioManager 클래스를 사용하여 음악을 제어하고 재생합니다. initState 메서드에서 초기에 음악을 설정하고, dispose 메서드에서 앱이 종료되었을 때 음악을 정지시킵니다. 각 음악 리스트에는 onTap 이벤트를 추가하여 해당 음악을 선택하면 재생되도록 만들었습니다.

요약

위의 코드를 참고하여, Flutter에서 sticky 헤더를 사용한 음악 플레이어 앱을 만들었습니다. 플레이 리스트 화면에서 스크롤할 수 있는 카테고리와 음악 리스트를 제공하며, 음악을 선택하고 재생할 수 있도록 했습니다.

더 자세한 내용은 다음 문서들을 참고해주세요:

Happy coding!