[Flutter-2team] Section 9 Xylophone

Flutter 강의 Section 9에서는 Xylophone 앱을 만드는 것이다.

 

배운 내용은 다음과 같다.

 

- How to use Flutter & Dart Package

- How to play multiple sound

- Dart function

- Xylophone 앱

 

 

 

<How to use Flutter & Dart Package>

어떤 기능을 만들고자 할 때, 그 기능을 만들기 위해 코드를 몇 시간 동안 직접 짤 필요없이

다른 사람이 만들어 놓은 기능을 가져다 사용할 수 있다. 다른 사람이 만들어 놓은 코드가 Package 이다.

 

패키지를 내 코드에 사용하기 위해,

 

(1) pub.dev/ 에 접속해서 찾고자하는 기능을 가지고 있는 package를 찾는다.

    ex) 나는 copy 기능을 검색해보았다. 검색하니까 clipboard라는 package가 나왔다.

(2) android studio를 켜고 작성중인 프로젝트의 pubspec.yaml파일을 열고,

    dependencies라고 적힌 부분에 다음과 같이 package를 추가한다.

//들여쓰기 주의
dependencies:
  flutter:
    sdk: flutter
  audioplayers: ^0.16.2
  clipboard: ^0.1.2+8

(3) pub get 버튼을 눌러서 android studio에서 이 pacakage를 인식할 수 있게 한다.

    ( 그 후, 자신의 코드가 있는 곳에서 get dependencies가 뜨면 누른다. 안뜨면 진행 X)

 

(4) 좌측의 project 탐색기에서 자신이 추가한 패키지가 추가되었는지 확인한다.

    ex) 본인의 경우, External Libraries/Dart Packages/clipboard

 

(5) 코드 최상단에 package를 import 하는 코드를 작성하고 사용한다.

    ex) 본인의 경우, import 'package: clipboard/clipboard.dart'

 

 

 

<How to play multiple sound>

이 부분은 강의에서 나오는 audioplayers package를 사용했을 때를 가정한 것이다.

SafeArea(
  child: Column(
  	crossAxisAlignment: CrossAxisAlignment.stretch,
    children: [
      Expanded(
        child: FlatButton(
          color: Colors.red,
          onPressed: (){
            final player = AudioCache();
            player.play('note$number.wav');
           },
         ),
      ),
      Expanded(
        child: FlatButton(
          color: Colors.red,
          onPressed: (){
            final player = AudioCache();
            player.play('note$number.wav');
           },
         ),
      ),
    ]
  )
)

위의 코드처럼 FlatButton을 통해 버튼을 눌렀을 때 player package의 기능을 사용해서

assets에 추가해놓은 음악을 실행할 수 있다.

 

일반적으로 package의 기능은 사용하고 싶은 package의 README을 잘 읽어보면 보통 설명이 되어있다.

 

강의에서 버튼을 총 7개를 만들기 때문에 중복되는 코드는 다음과 같이 함수를 사용하여 중복을 줄였다.

//함수의 number를 통해 그림숫자 전달받고,
//함수의 color를 통해 색깔을 전달 받은 후,
//FlatButton을 만든다.

Expanded makeSound(int number, Color color){
    return Expanded(
      child: FlatButton(
        color: color,
        onPressed: (){
          final player = AudioCache();
          player.play('note$number.wav');
        },
      ),
    );
  }

 

 

 

<Dart function>

지난 시간에 배운 Dart 함수를 살펴보면 다음과 같다.

//myname함수생성
void myname(){
	print('naaaammmmeeee');
}

//myname함수호출
void main(){
	myname();
}

하지만 함수의 사용은 이것뿐만 아니라

 

1. 함수의 인수를 통해 값을 전달해줄수 있다.

//myname함수생성
void myname(String name){
	print(name);
}

//myname함수호출
void main(){
	myname('i_am_luke'); //myname함수에 인수를 통해 'i_am_luke'라는 값을 전달하였다.
}

 

2. 만약 여러개의 값을 여러 인수를 통해 전달해줄 경우 헷갈릴 수 있다.

   그럴 경우 Dart에서는 중괄호를 이용해서 함수 호출시 인수의 이름으로 값을 전달할 수 있다.

//함수 생성
//함수의 인자를 중괄호로 묶어주는 것이 핵심
void parentName({String father, String mother}){
    print(father,mother);
    //또는 print('$father $mother');
}

//함수 호출
void main(){
    //함수 생성시 중괄호를 통해 인수를 묶었으므로
    //함수의 인수를 통해 값을 정확하게 전달할 수 있다.
	parentName(father: 'Lee', mother: 'Kim');
}

 

3. 함수를 통해 결과를 출력할 수 있다.

//함수 생성

//함수의 데이터 형태가 void(출력없음)이기 때문에 return이 존재하지 않는다.
void hello(String name){
	print(name);
}

int add(int a, int b){
	return a+b;
}

double multiply(double a, double b){
	return a*b;
}

//함수 호출

void main(){
    //hello함수는 return이 없으므로 그대로 사용.
    hello('luke');
    
    //add함수는 int값을 return 하기 때문에 사용할 때 int 형태로 값을 받아야함.
    int add_num = add(3,7);
    
    //multiply함수는 double 값을 return 하기 때문에 사용할 때 double형태로 값을 받아야함.
    double mul_num = multiply(3,7);
}

 

Dart Arrow function

지금까지 우리는 중괄호 안에 코드를 실행하였지만, Dart Arrow 라는 것을 통해서도 실행할 수 있다.

//이전
void main(){
    return A+B;
}

//Dart Arrow function 이용
void main() => A+B;

코드 말고 함수 또한 실행 가능하고, 인수도 이용할 수 있다.

void hello(String name){
    print('hello $name');
}

//이전
int main(){
    hello('luke');
}

//Dart Arrow function
int main() => hello('luke');

하지만 아래 예시를 보면 알겠지만 여러줄의 코드나 함수를 실행할 수 없다.

//이전
void main(){
    print('hello');
    print('luke');
}

//Dart Arrow function
void main() => print('hello');print('luke'); // 에러 발생

====> 코드를 알아보기에는 쉽지만 여러줄의 코드를 실행할 수 없는 것이 단점이다.

 

 

 

<Xylophone 앱>

(1) 코드 작성

import 'package:flutter/material.dart';
import 'package:audioplayers/audio_cache.dart';

void main() {
  runApp(XylophoneApp());
}

class XylophoneApp extends StatelessWidget {
  Expanded makeSound(int number, Color color){
    return Expanded(
      child: FlatButton(
        color: color,
        onPressed: (){
          final player = AudioCache();
          player.play('note$number.wav');
        },
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              makeSound(1, Colors.red),
              makeSound(2, Colors.orange),
              makeSound(3, Colors.yellow),
              makeSound(4, Colors.green),
              makeSound(5, Colors.blue),
              makeSound(6, Colors.blue[900]),
              makeSound(7, Colors.purple),
            ],
          ),
        ),
      ),
    );
  }
}

(2) 실행 화면

출처: https://luke-computer.tistory.com/6?category=436184 [Voila! Luke's Computer]