goal : 'audioplayers' 패키지와 'function'을 사용하여 'xylophone' 앱을 구현하자.
로컬assets
디렉토리의 소리파일을 재생시켜주는 패키지를 이용하여 'xylophone' 기능을 구현하는 앱을 만들것이다.
※'input'(parameter) & 'output'(return)을 포함하는 function을 통해 코드를 최대한 간결하게 작성할 계획이다.※
먼저 화면을 작성하자. 소리를 내는 총7의 건반이 필요하다. 'Column'위젯에 7개의 'TextButton'을 만들고 각 버튼들을 'Expanded' 클래스로 감싸줄 것이다.
※패키지에서 제공하는 'player.play'명령을 이용해 소리파일을 재생한다.※
- Scaffold
배경색 : black- Column
교차축정렬 : stretch
-Textbutton 1-7
배경색 : red-purple
onPressed : player.play(note1.wav-note7.wav)
위의 구조로 코드를 작성하자.
import 'package:flutter/material.dart';
import 'package:audioplayers/audioplayers.dart';
void main() {
runApp(XylophoneApp());
}
class XylophoneApp extends StatelessWidget {
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.black,
body: SafeArea(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(
child: TextButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.red)),
onPressed: () {
final player = AudioCache();
player.play('note1.wav');
},
), // TextButton
), // Expanded
Expanded(
child: TextButton(
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all(Colors.orange)),
onPressed: () {
final player = AudioCache();
player.play('note2.wav');
},
), // TextButton
), // Expanded
Expanded(
child: TextButton(
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all(Colors.yellow)),
onPressed: () {
final player = AudioCache();
player.play('note3.wav');
},
), // TextButton
), // Expanded
Expanded(
child: TextButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.green)),
onPressed: () {
final player = AudioCache();
player.play('note4.wav');
},
), // TextButton
), // Expanded
Expanded(
child: TextButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.blue)),
onPressed: () {
final player = AudioCache();
player.play('note5.wav');
},
), // TextButton
), // Expanded
Expanded(
child: TextButton(
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all(Colors.indigo)),
onPressed: () {
final player = AudioCache();
player.play('note6.wav');
},
), // TextButton
), // Expanded
Expanded(
child: TextButton(
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all(Colors.purple)),
onPressed: () {
final player = AudioCache();
player.play('note7.wav');
},
), // TextButton
), // Expanded
],
), // Column
), // SafeArea
), // Scaffold
); // MaterialApp
}
}
실행결과, 원하는 앱을 구현했지만, 반복되는 구조로 인해 코드가 매우 길어졌다.
'Expanded' 위젯 내부의 반복되는 코드를 'playsound'라는 함수로 정의하자.
Expanded playsound({int number, Color color}) {
return Expanded(
child: TextButton(
style: ButtonStyle(backgroundColor: MaterialStateProperty.all(color)),
onPressed: () {
final player = AudioCache();
player.play('note$number.wav');
},
),
)
}
※'Expanded'를 return 해야하므로 함수명 앞에 void가 아닌 'Expanded' 기입.※
이제, 함수를 반영하자.
void main() {
runApp(XylophoneApp());
}
class XylophoneApp extends StatelessWidget {
Expanded playsound({int number, Color color}) {
return Expanded(
child: TextButton(
style: ButtonStyle(backgroundColor: MaterialStateProperty.all(color)),
onPressed: () {
final player = AudioCache();
player.play('note$number.wav');
},
), // TextButton
); // Expanded
}
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.black,
body: SafeArea(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
playsound(number: 1, color: Colors.red),
playsound(number: 2, color: Colors.orange),
playsound(number: 3, color: Colors.yellow),
playsound(number: 4, color: Colors.green),
playsound(number: 5, color: Colors.blue),
playsound(number: 6, color: Colors.indigo),
playsound(number: 7, color: Colors.purple),
],
), // Column
), // SafeArea
), // Scaffold
); // MaterialApp
}
}
훨씬 간결하게 코드를 작성할 수 있었다.