[Flutter - 1team] 섹션 9 : Xylophone - Using Flutter and Dart Packages to Speed Up Development

패키지를 이용하여 오디오플레이어를 구현하고, 함수를 이용해 코드를 간결하게 만들어보자 !

 

 

 

* 패키지 설치 *

 

1.  https://pub.dartlang.org 접속

2. Xylophone앱에 필요한 오디오 패키지를 검색해보자. 'play audio file' 검색

3. 많은 audio관련 패키지들이 있다. 이 중 popularity가 비교적 높은 'audioplayers'패키지를 클릭

 

 

4. Installing 탭을 클릭해서 설명대로 패키지를 설치한다. 

참고) yaml파일에 의존성 추가 시, 버전 앞에 '^'가 붙으면 후에 패키지가 업데이트 되어도 0.x.x버전들은 호환 가능.

(버전 0이 이외는 불가능)

 

패키지 추가 완료!

 

 

* audioplayers 패키지 사용해보기 *

 

Readme탭을 클릭해 사용법을 확인해 보자. 로컬파일, 즉 Local Assets를 사용하려면 AudioCache 클래스가 필요하다.

Readme탭에서 AudioCache부분(좌)을 찾아 here을 클릭하면 오디오캐시 사용 방법(우)을 알 수 있다.

오디오파일 재생 방법

1. import 'package:audioplayers/audio_cache.dart'; 를 코드 맨 위에 추가

2. 하단의 두줄 코드 추가

   final player = AudioCache();

   player.play('오디오파일이름'); 

 

 

Click Me가 써진 FlatButton을 우선 추가해주고, 그 안에 오디오 파일을 실행하는 코드를 작성해보았다.

참고) 노래 파일이 assets파일에 있으면 노래 파일의 이름만 적어주어도 된다.

 

 

실행 결과(Click Me 버튼을 누르면 오디오 파일이 재생된다.)

 

 

* 버튼을 디자인 해보기 *

 

    1. [여러개의 건반 만들기] FlatButton을 선택해 alt+control 후 Wrap with a Column

2. [건반 사이의 여백 삭제] FlatButton을 선택해 alt+control 후 Wrap with widget > widget을 Expanded로 설정

3. [가로로 화면을 꽉 채우기] Colomn위젯 내에 crossAxisAlignment: CrossAxisAlignment.stretch, 입력

 

 

버튼에 text대신 색을 입혔다.

4. 건반의 개수 만큼 버튼을 여러개 등록해보자.

 

 

디자인 완성 화면(각 색깔버튼을 누르면 서로 다른 음계 소리가 재생된다.)

 

 

* 함수로 중복 코드 줄이기 *

1. Expanded이하가 중복되므로 이를 리턴하는 함수를 만들어보자.

2. 매개변수로 컬러와 (파일명에 들어가는)숫자를 받고, 자료형과 return값이 Expanded인 함수를 만들었다.

 

 

매개변수의 이름을 명시하면서 함수를 호출하였다.

3. 중복됐던 부분을 함수 호출로 대체한다.

 

 

Dart의 함수에서 유의할 점

1. 함수를 호출할 때 매개변수의 이름을 명시하고 싶다면 함수의 매개변수를 {}로 한번 더 감싼다.(사진1 첫번째줄)

2. string에서 매개변수가 들어가야 한다면 $를 앞세우고 매개변수 이름을 적는다.(사진1 7번째줄)

 

(사진1)

3. 함수 body가 한줄이라면 =>(Arrow)로 간편하게 나타낼 수 있다.(사진2)

3-1. body가 return문이라면 2번째 줄 코드 처럼 return을 생략할 수 있다. (사진2 두번째줄)

 

(사진2)