이 튜토리얼에서는 Flutter 앱에서 음악 및 오디오를 처리하고 expandable 위젯을 사용하여 사용자에게 편리한 사용자 경험을 제공하는 방법에 대해 알아보겠습니다.
필요한 패키지 설치
먼저, Flutter 앱에서 음악 및 오디오를 처리하는 데 필요한 패키지를 설치해야 합니다. 이를 위해서 audioplayers 패키지를 사용할 수 있습니다. pubspec.yaml 파일에 다음 코드를 추가하여 패키지를 설치하세요:
dependencies:
audioplayers: ^0.18.3
위 코드를 추가한 후, 터미널에서 flutter packages get 명령어를 실행하여 패키지를 다운로드 및 설치하세요.
음악 및 오디오 파일 가져오기
앱에서 재생할 음악 및 오디오 파일을 가져와야 합니다. 이를 위해 앱의 프로젝트 디렉토리에 assets 폴더를 생성하고 음악 파일을 복사하세요.
음악 재생 코드 작성
이제 Flutter 앱에서 음악을 재생하기 위한 코드를 작성해보겠습니다.
import 'package:flutter/material.dart';
import 'package:audioplayers/audioplayers.dart';
class MusicPlayer extends StatefulWidget {
@override
_MusicPlayerState createState() => _MusicPlayerState();
}
class _MusicPlayerState extends State<MusicPlayer> {
AudioPlayer audioPlayer = AudioPlayer();
Future<void> playMusic() async {
int result = await audioPlayer.play('assets/audio/music.mp3', isLocal: true);
if (result == 1) {
// 재생 시작
}
}
Future<void> pauseMusic() async {
int result = await audioPlayer.pause();
if (result == 1) {
// 일시 정지
}
}
Future<void> stopMusic() async {
int result = await audioPlayer.stop();
if (result == 1) {
// 정지
}
}
@override
void initState() {
super.initState();
audioPlayer.onPlayerStateChanged.listen((event) {
if (event == AudioPlayerState.COMPLETED) {
// 재생 완료
}
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('음악 재생기'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
IconButton(
icon: Icon(Icons.play_circle_filled),
onPressed: playMusic,
),
IconButton(
icon: Icon(Icons.pause_circle_filled),
onPressed: pauseMusic,
),
IconButton(
icon: Icon(Icons.stop_circle_outlined),
onPressed: stopMusic,
),
],
),
),
);
}
}
위 코드에서 playMusic() 함수는 음악을 재생하는 데 사용되며, pauseMusic() 함수는 재생을 일시 정지시키고, stopMusic() 함수는 재생을 정지시킵니다. 또한 onPlayerStateChanged 이벤트를 통해 재생 상태를 확인할 수 있습니다.
Expandable 위젯 추가
앱에 Expandable 위젯을 추가하여 사용자에게 편리한 사용자 경험을 제공할 수 있습니다. Expandable 위젯은 특정 요소를 클릭하면 자동으로 확장 및 축소되는 위젯입니다.
import 'package:flutter/material.dart';
import 'package:expandable/expandable.dart';
class MusicList extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ExpandableNotifier(
child: Card(
child: Column(
children: [
ExpandablePanel(
header: Text('음악 목록'),
collapsed: Text('축소된 내용'),
expanded: ListView.builder(
shrinkWrap: true,
itemCount: 10, // 음악 목록 개수에 따라 변경
itemBuilder: (context, index) {
return ListTile(
title: Text('음악 제목'),
subtitle: Text('아티스트'),
onTap: () {
// 음악 재생 처리
},
);
},
),
),
],
),
),
);
}
}
위 코드에서는 ExpandableNotifier와 ExpandablePanel 위젯을 사용하여 확장 가능한 리스트를 만들었습니다. 리스트 요소를 클릭하면 음악을 재생하도록 처리할 수 있습니다.
앱에 음악 재생 및 확장 가능한 목록 추가
마지막으로, 위에서 작성한 음악 재생 코드와 확장 가능한 리스트를 앱의 메인 페이지에 추가하세요.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: '음악 앱',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: Text('음악 앱'),
),
body: Column(
children: [
MusicPlayer(), // 음악 재생기 추가
MusicList(), // 확장 가능한 음악 목록 추가
],
),
),
);
}
}
위 코드를 실행하면 음악을 재생할 수 있는 음악 재생기와 확장 가능한 음악 목록을 가진 앱이 생성됩니다.
이제 플러터(expandable)을 사용하여 음악과 오디오 앱을 개발하는 방법을 알게 되었습니다. 여기서는 기본적인 기능만 포함되어 있지만, 이를 확장하여 여러가지 기능을 추가하고 사용자 경험을 개선할 수 있습니다.