[flutter] 08 빠르고 다양한 앱 제작의 시작, 패키지

-이번에 해 볼 것 -

Flutter Package에 대한 이해

Audio Player Package 활용

 

1. 선행작업

(1) 버튼을 누르면 음악이 나오는 새 프로젝트를 개발할 예정이다

(2) 새 프로젝트를 생성한 뒤, assets/audios 폴더에 mp3파일 저장

(3) pubspec.yaml 파일에 경로 지정 후 저장 및 pubget

(4) appBar를 만들고 제목 텍스트 달아주기

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('motivationplayer'),
        ),
      ),
    );
  }
}

 

이것은 우리가 기존에 만들었던 간단한 구조이다. 

하지만, 프로젝트를 생성하면 처음 나오는 카운터 앱의 구조를 보면 다음과 같이 구성되어 있다.

runApp(MyApp)	MyApp(STL)   return MaterialApp	MaterialApp   home : const MyHomePage	MyHomePage(STF)	State
					Widget  return Scaffold

 

이러한 구조가 보통의 앱의 구조로, 이번에는 카운터앱의 구조와 동일하게 짜보기로 한다.

 

1. 메인 함수 runApp 안에 MyApp을 주었고,
2. MyApp은 STL위젯으로 만들었다.
3. 그 위젯에는 MaterialApp을 넣었고, 유일하게 아는 속성 home을 MotivationPlayerPage라고 넣었다.
4. 그 아래 MotivationPlayerPage를 STF로 만들었다.
5. STF의 위젯 영역에 Scaffold를 주고, appBar를 만들어 title를 text로 하나 만들었다.

 

 

그 결과물이 이 앱이다. 제일 위 코드랑 결과물 자체는 다를게 없다. 속이 조금 더 일반적인 앱과 같은 구조로 되어 있을 뿐.

 

 

 

 

2. 플러터 패키지란?

(1) 개념

패키지는 어떤 기능들의 묶음이나 그룹이다. 재사용가능한 코드들을 구성해서 모아놓은 것이다. 다양한 프레임워크, 언어에서 젬, 라이브러리, 플러그인, 모듈이라는 용어로 불리기도 한다. 기능들을 묶어서 제공한다는 의미에서 비슷한 개념들이다.

 

PC 본체 완제품을 예로 들면, CPU는 인텔이나 AMD에서, 램은 하이닉스나 삼성 등에서 가져올 것이다. 각각의 부품은 그 자체로 완성품들이다. 이 때, 각각의 부품들을 패키지라고 생각하면 되고, 부품들이 모여 완성된 컴퓨터가 프로그램이라고 생각하면 되겠다.

 

import라는 키워드를 통해 내 프로그램에 패키지를 불러온다.(임포트는 내 파일을 불러올 때도 쓴다)

 

https://pub.dev에서 구글이 제공하는 패키지를 입수할 수 있다.

 

패키지는 검증되지 않은 개발자들이 마음대로 올릴 수 있기 때문에, 안정적으로 업데이트되는 좋은 패키지를 잘 골라서 사용하는 것이 상당히 중요하다. 업데이트 안되는 패키지를 넣었다면 앱의 유지보수에 곤란한 상황에 처할 수 있기 때문이다.

 

LIKES, 배포자가 누구인지, 마지막 배포일이 언제인지 등을 잘 고려해서 선택을 해보자.

 

(2) 설치

random_string 패키지를 하나 설치해보자. 설치방법은 패키지의 상세페이지에도 잘 나와있다.

 

pubspec.yaml 파일에서 dependencies 쪽에 설치하도록 안내가 되어있다.

 

 

쿠퍼티노 아이콘즈와 같은 레벨로 추가해 주었다.

웃음표시 하나(^)는 캐럿 신택스(caret syntax)라고 불리운다.

^의 의미는 패키지를 최신버전으로 유지하겠다라는 의미이다.

^2.3.1의 의미는 2.3.1. ~ 2.9.9 사이의 버전 중 가장 최신 버전을 쓰겠다는 것이다.

 

한편, 버전의 세 자리 숫자(=semantic versioning)는 다음을 의미한다.

1자리	2자리	3자리
메이저 버전 큰 기능의 변경, 기존과 호환 불가	마이너 버전 호환을 유지하며 신기능 추가	패치 버전 기존 기능의 버그만 수정

* 강제성은 없는 암묵적인 룰이다.

 

아무튼, 패키지 적용을 위해 펍 겟을 누르고, 콘솔창에 exit code 0이 떠서 오류가 없음을 확인한 뒤,

main.dart에 임포트해서 추가해주면 준비작업이 끝난다.

 

class _MotivationPlayerPageState extends State<MotivationPlayerPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Motivation Player'),
      ),
      body: Center(
        child: Text(
          randomString(10),
        ),
      ),
    );
  }
}

랜덤스트링의 작동여부 확인을 위해서

기존에 만들었던 앱에서 appBar영역 아래에 body영역을 만들고, Center에서 텍스트를 하나 넣어보자.

이때, 랜덤스트링 readme문서에 나온 것처럼 텍스트 안에 랜덤스트링(글자수)를 넣어주면

아래 결과물처럼 화면이 리프레시 될 때마다 임의의 10문자를 보여준다.

 

 

문자열 랜덤 작성에 대한 어떠한 코드를 작성하지 않아도, 패키지를 활용해서 기능을 바로 손쉽게 활용할 수 있다.

연습했던 내용대로 펍.데브에서 오디오플레이어 패키지를 하나 설치하도록 하자.

 

 

 

3. Audio Pakage 활용

 

pub.dev에서 가장 탑에 있는 이 플레이어 패키지를 활용해보도록 하자.

패키지 설치는 위 방법을 참고해서 진행하도록 하자.

 

다음은 플레이 버튼을 하나 만들고, 그 버튼을 누르면 음악이 나오도록 할 예정이다.

 

return Scaffold(
  appBar: AppBar(
    title: Text('Motivation Player'),
  ),
  body: Center(
    child: ElevatedButton(
      onPressed: (){},
      child: Text('Play'),
    ),
  ),
);

 

먼저 플레이버튼을 위 코드처럼 만들어보았다.

바디에서 센터의 차일드를 기존의 텍스트를 없애고, 그 자리에 ElevatiedButton을 주었다.

그리고 터치하면 무조건 들어가야되는 onPressed를 일단 빈 함수로 만들고,

버튼의 차일드를 Text로 넣었다.

 

 

 

 

ReadMe에 일단 객체를 만들어야 한다고 써 있다. 그래서 객체를 만든다. 리드미의 문법 그대로 복사해서 붙여넣었다.

위치는 통상적으로 class와 프로그램의 빌드 사이에 객체를 넣으면 큰 무리가 없다.

 

 

리드미를 참고하여, 버튼을 클릭하면 즉시 플레이되게 하는 코드를 골랐다. 그리고 assets에 있는 소스를 사용할 예정이기 때문에 AssetSource로 바꿔주었다. 코드는 온프레스드 안에 넣어주면, 버튼을 눌렀을 때 저게 작동한다

 

ElevatedButton(
  onPressed: (){
    player.play(AssetSource("audios/sound1.mp3"),);
  },
  child: Text('Play'),

 

버튼 안에 코드를 넣어줌으로써 플레이 버튼을 누르면 소리가 나오도록 코딩이 완료되었다.