[Flutter] Udemy Flutter - Section9: Xlophone - A Simple Musical Instrument App

✔ 유데미 강의 - 안젤라 유 : https://www.udemy.com/course/flutter-bootcamp-with-dart/

📌 74. Xylophone - A Simple Musical Instrument App

• github에서 프로젝트 파일 가져오기 (https://github.com/londonappbrewery/xylophone-flutter)

📌 75. What are Flutter & Dart Packages?

• 패키지: 통합할 수 있는 다른 사람들이 만든 오픈 소스 코드 라이브러리
• https://pub.dev/flutter/packages 에 가면 여러 패키지를 검색할 수 있음

• 단어를 생성해주는 패키지 사용

▶ 패키지를 사용하려면 installing에서 필요한 것을 수행해야 함

1. Depend on it

▶ terminal 창에 flutter pub add english_words 입력

▶ pubspec.yaml 파일 dependencies에 english_words가 추가된 것을 볼 수 있음

2. Import it

▶ main.dart 파일에 import

• 패키지 사용 : nouns.first

📌 76. How to Play Sound Across Platforms

• audio players 패키지 사용

• audioplayer를 사용해 소리 재생해보기

FlatButton(
  onPressed: () {
    final player = AudioCache();
    player.play('note1.wav')
  },
  child: Text('Click Me'),
)

▶ 재실행 시키고 Click Me 버튼을 누르면 소리가 나는 것을 확인할 수 있음

✨ Tip.

• audioplayer가 자동으로 assets 폴더 안에 있는 파일을 찾기 때문에 assets 폴더 안에 재생하고자 하는 파일이 있다면 경로 적어줄 필요 없음

📌 77. How to Play Multiple Sounds

• 7개의 버튼 만들고 소리 적용하기

Column(
  children: <Widget>[
    FlatButton(
      onPressed: () {
        final player = AudioCache();
        player.play('note1.wav');
      },
      color: Colors.red,
    ),
 
 ....
)

• 반복되는 코드 제거

void playSound(int soundNumber) {
  final player = AudioCache();
  player.play('note$soundNumber.wav');  
}

📌 78. [Dart] Functions - Part 2

• 입력이 있는 함수 : 함수 블록 안에서 이 입력을 사용 가능
• 데이터 유형을 지정해야 하고 변수 이름을 지정해야 함
• 입력 인수에 {}를 사용하면 호출할 때 사용하는 변수 이름 지정해줘야 함

📌 79. Updating the UI of Our App

• 배경 검은색으로 변경
• 버튼을 화면에 꽉 차게 변경 : Expanded 위젯 사용, crossAxisAlignment 속성 사용(stretch)

📌 80. [Dart] Functions - Part3

• void 함수 유형을 데이터 유형으로 바꾸면 return을 통해 데이터 유형을 반환할 수 있음

📌 82. Refactoring Our App

• 중복되는 Expanded 위젯 부분 중복 제거

Expanded buildKey({Color color, int soundNumber}) {
  return Expanded(
    child: FlatButton(
      onPressed: () {
        playSound(soundNumber);
      },
      color: color,
    ),
  );
}

.....

children: <Widget>[
  buildKey(color: Colors.red, soundNumber: 1),
  buildKey(color: Colors.orange, soundNumber: 2),
  buildKey(color: Colors.yellow, soundNumber: 3),
  buildKey(color: Colors.green, soundNumber: 4),
  buildKey(color: Colors.teal, soundNumber: 5),
  buildKey(color: Colors.blue, soundNumber: 6),
  buildKey(color: Colors.purple, soundNumber: 7),
]

📌 83. [Dart] Arrow Functions

• 화살표 함수 : 한줄의 코드만 실행됨

int add() {
  return 5 + 2;
}

int add() -> 5 + 2;

깃허브 링크 : https://github.com/ap3334/flutter-udemy/tree/main/section9