Written by java-style
on 2021-09-26

[Flutter] Udemy 플러터 강의 섹션 9 학습 (Xylophone - Using Flutter...

300x250

[이전학습]

https://youngest-programming.tistory.com/621

[참고]

https://www.udemy.com/course/flutter-bootcamp-with-dart/

https://github.com/mtjin/flutter-practice

[74. Xylophone - A Simple Musical Instrument App]

간단한 음악 장비 앱을 만들거라고 합니다.

[75. What are Flutter & Dart Packages?]

플러터와 다트 패키지를 다음 사이트에서 찾고 프로젝트에 추가할 수 있습니다.

https://pub.dev/flutter/packages

english_words 패키지를 검색하여 pubspec.yml 파일에 추가해주었습니다.

name: xylophone description: A new Flutter application. version: 1.0.0+1 environment: sdk: ">=2.1.0 <3.0.0" dependencies: flutter: sdk: flutter cupertino_icons: ^0.1.2 english_words : ^3.1.5 dev_dependencies: flutter_test: sdk: flutter flutter: uses-material-design: true assets: - assets/

패키지를 추가했으면 다음과 같이 import 하여 사용이 가능합니다.

nouns 에서 가장 마지막 단어를 볼 수 있습니다.

import 'package:english_words/english_words.dart'; import 'package:flutter/material.dart'; void main() => runApp(XylophoneApp()); class XylophoneApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: SafeArea( child: Text(nouns.last), ), ), ); } }

[76. How to Play Sound Across Platforms]

이전에 추가한 패키지는 지우고 이번 섹션의 본프로젝트인 오디오 관련 패키지를 추가하고 이 패키지에서 제공하는 기능을 통해 assets 폴더에 있는 wav음악파일을 재생시키는 코드를 작성해봤습니다.

여기서는 internet이 아닌 assets에 프로젝트 내부 음악을 재생시키는거라 audioplayers 패키지의 audio_cache.dart만 사용한것을 볼 수 있습니다. (+이 패키지에서는 인터넷에서 음악 가져오는 기능도 제공합니다.)

https://pub.dev/packages/audioplayers/install

name: xylophone description: A new Flutter application. version: 1.0.0+1 environment: sdk: ">=2.1.0 <3.0.0" dependencies: flutter: sdk: flutter cupertino_icons: ^0.1.2 audioplayers: ^0.10.0 dev_dependencies: flutter_test: sdk: flutter flutter: uses-material-design: true assets: - assets/

import 'package:audioplayers/audio_cache.dart'; import 'package:flutter/material.dart'; void main() => runApp(XylophoneApp()); class XylophoneApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: SafeArea( child: Center( child: FlatButton( onPressed: () { final player = AudioCache(); player.play('note1.wav'); }, child: Text('Click Me'), ), ), ), ), ); } }

클릭하면 오디오가 재생됩니다.

[77. How to Play Multiple Sounds]

여러개의 사운드를 낼 수 있는 버튼을 구현했습니다.

함수를 사용하여 모듈화했습니다.

import 'package:audioplayers/audio_cache.dart'; import 'package:flutter/material.dart'; void main() => runApp(XylophoneApp()); class XylophoneApp extends StatelessWidget { void playSound(int soundNumber) { final player = AudioCache(); player.play('note$soundNumber.wav'); } @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: SafeArea( child: Column( children: [ FlatButton( color: Colors.red, onPressed: () { playSound(1); }, ), FlatButton( color: Colors.orange, onPressed: () { playSound(2); }, ), FlatButton( color: Colors.yellow, onPressed: () { playSound(3); }, ), FlatButton( color: Colors.green, onPressed: () { playSound(4); }, ), FlatButton( color: Colors.teal, onPressed: () { playSound(5); }, ), FlatButton( color: Colors.blue, onPressed: () { playSound(6); }, ), FlatButton( color: Colors.purple, onPressed: () { playSound(7); }, ), ], ), ), ), ); } }

[78. [Dart] Functions - Part 2]

함수란 무엇인가에 대해 배웠습니다.

자바와 코틀린에서의 함수와 큰 차이점은 없었습니다.

[79. Updating the UI of Our App]

Expanded 위젯과 crossAxixAligment 정렬을 통해 UI를 업데이트하였습니다.

그리고 buildKey()로 UI그리는것을 모듈화 하였는데 아직 미완성단계입니다.

[80. [Dart] Functions - Part 3]

78에서 함수강의에 이어지는 함수강의 파트3입니다.

함수의 리턴에 대해 배웠습니다.

특이한점은 인자값을 넘겨줄때 매개변수명을 이용하여 인자값을 넘겨줄때는 매개변수를 {} 로 감싸야합니다.

이 예시는 다음 81 강의 코드를 참고하면 됩니다.

[82. Refactoring Our App]

79강의에서 미완성한 부분을 80에서 다트 함수에 대해 배우고 이를 적용하여 구현을 완료했습니다.

import 'package:audioplayers/audio_cache.dart'; import 'package:flutter/material.dart'; void main() => runApp(XylophoneApp()); class XylophoneApp extends StatelessWidget { void playSound(int soundNumber) { final player = AudioCache(); player.play('note$soundNumber.wav'); } // 매개변수명으로 인자를 넘길때는 {} 로 매개변수를 감싸줘야함 Expanded buildKey({Color color, int soundNumber}) { return Expanded( child: FlatButton( color: color, onPressed: () { playSound(soundNumber); }, ), ); } @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: SafeArea( child: Column( crossAxisAlignment: CrossAxisAlignment.stretch, children: [ buildKey(color: Colors.red, soundNumber: 1), buildKey(color: Colors.purple, soundNumber: 1), buildKey(color: Colors.yellow, soundNumber: 1), buildKey(color: Colors.green, soundNumber: 1), buildKey(color: Colors.teal, soundNumber: 1), buildKey(color: Colors.blue, soundNumber: 1), buildKey(color: Colors.purple, soundNumber: 1), ], ), ), ), ); } }

[83. [Dart] Arrow Functions]

다트의 Arrow Functions 에 대해 간략히 배웠습니다.

배운 내용을 바탕으로 buildKey()에 적용해봤습니다.

import 'package:audioplayers/audio_cache.dart'; import 'package:flutter/material.dart'; void main() => runApp(XylophoneApp()); class XylophoneApp extends StatelessWidget { void playSound(int soundNumber) { final player = AudioCache(); player.play('note$soundNumber.wav'); } // 매개변수명으로 인자를 넘길때는 {} 로 매개변수를 감싸줘야함 // Arrow Function 적용 Expanded buildKey({Color color, int soundNumber}) => Expanded( child: FlatButton( color: color, onPressed: () { playSound(soundNumber); }, ), ); @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: SafeArea( child: Column( crossAxisAlignment: CrossAxisAlignment.stretch, children: [ buildKey(color: Colors.red, soundNumber: 1), buildKey(color: Colors.purple, soundNumber: 1), buildKey(color: Colors.yellow, soundNumber: 1), buildKey(color: Colors.green, soundNumber: 1), buildKey(color: Colors.teal, soundNumber: 1), buildKey(color: Colors.blue, soundNumber: 1), buildKey(color: Colors.purple, soundNumber: 1), ], ), ), ), ); } }

이상 섹션 9 학습을 완료했습니다.

댓글과 공감은 큰 힘이 됩니다. 감사합니다. !!

[다음강의]

https://youngest-programming.tistory.com/624

300x250

from http://youngest-programming.tistory.com/623 by ccl(S) rewrite - 2021-09-26 11:27:41

Top