플러터(Flutter)는 구글에서 개발한 UI 프레임워크로, 동일한 코드로 iOS와 Android 애플리케이션을 개발할 수 있습니다. 이번 블로그 포스트에서는 플러터를 사용하여 sticky 헤더를 가진 음악 플레이리스트 앱을 만들어 보겠습니다.
목차
프로젝트 설정
플러터 개발을 시작하기 위해, 먼저 Flutter SDK를 설치해야 합니다. 설치된 후에는 플러터 프로젝트를 생성하고 에디터 설정을 완료해야 합니다. 자세한 내용은 Flutter 설치 안내를 참조해 주세요.
플레이리스트 데이터 모델링
우리는 음악 플레이리스트를 표현하는 데이터 모델이 필요합니다. 플레이리스트에는 제목, 작성자, 이미지 URL 및 음악 목록이 포함될 수 있습니다. 예를 들어, 다음과 같은 Playlist 모델을 사용할 수 있습니다:
class Playlist {
final String title;
final String author;
final String imageUrl;
final List<Music> musicList;
Playlist({required this.title, required this.author, required this.imageUrl, required this.musicList});
}
class Music {
final String title;
final String artist;
final String url;
Music({required this.title, required this.artist, required this.url});
}
스티키 헤더 구현
이제 플레이리스트 앱의 중요한 부분인 스티키 헤더를 구현해 보겠습니다. 플러터에서는 SliverAppBar 위젯을 사용하여 스크롤 가능한 리스트에서 고정 헤더를 생성할 수 있습니다. 이를 사용하여 플레이리스트의 헤더를 만들어 보겠습니다:
class PlaylistPage extends StatelessWidget {
final Playlist playlist;
PlaylistPage({required this.playlist});
@override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: [
SliverAppBar(
pinned: true,
expandedHeight: 200.0,
flexibleSpace: FlexibleSpaceBar(
background: Image.network(playlist.imageUrl, fit: BoxFit.cover),
),
),
SliverList(
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return ListTile(
title: Text(playlist.musicList[index].title),
subtitle: Text(playlist.musicList[index].artist),
);
},
childCount: playlist.musicList.length,
),
),
],
),
);
}
}
위 코드에서 SliverAppBar 위젯은 pinned 속성으로 고정 헤더를 생성하게 되며, expandedHeight 속성으로 헤더의 확장 높이를 지정합니다. SliverAppBar의 flexibleSpace 속성을 사용하여 플레이리스트의 이미지를 배경으로 설정할 수 있습니다.
음악 재생 기능 추가
마지막으로, 음악 재생 기능을 플레이리스트 앱에 추가할 수 있습니다. audioplayers 패키지를 사용하여 간단한 음악 재생을 구현 할 수 있습니다:
import 'package:audioplayers/audioplayers.dart';
//...
void playMusic(String url) {
AudioPlayer audioPlayer = AudioPlayer();
audioPlayer.play(url);
}
위 코드에서 audioplayers 패키지의 AudioPlayer 클래스를 사용하여 음악을 재생할 수 있습니다. play 메서드를 사용하여 음악 파일의 URL을 전달하면 음악을 재생할 수 있습니다.
마무리
이제 플러터를 사용하여 sticky 헤더를 가진 음악 플레이리스트 앱을 만들어 보았습니다. SliverAppBar를 사용하여 헤더를 고정시키고, audioplayers 패키지를 사용하여 음악을 재생하는 방법을 배웠습니다. 이를 바탕으로 여러분만의 고유한 음악 앱을 만들어 보세요!