Flutter 앱에서 이미지와 폰트를 사용하기 위해서는 앱을 패키징 할 때 필요한 파일들이 같이 패키징이 되도록 설정을 해 주어야 한다.

이번 포스트에서는 어떻게 설정하는 지 알아본다.

#pubspec.yaml 파일 수정

앱에 패키징 할 파일들과 라이브버리 설정은 pubspec.yaml에서 한다. 이 파일은 프로젝트의 루트 디렉토리에 존재하고 있다.

우선 pubspec.yaml을 수정하기 전에 이미지 파일과 폰트 파일을 관리 할 폴더를 루트 디렉토리에 만들어 준다. 폴더명은 자신이 원하는 명으로 하면 되지만, 필자는 images와 fonts라는 이름을 사용하였다.

폴더를 만들었으면 pubspec.yaml 파일을 연다.
스크롤을 밑으로 내리다 보면 flutter: 라는 섹션이 있다. 이 곳에서 설정을 해 줄 수 있다.

flutter:
  uses-material-design: true

  assets:
  - images/
  fonts:
    - family: SFPro
      fonts:
        - asset: fonts/SF-Pro.ttf

이런 식으로 assets: 밑에 이미지 폴더와 폰트를 설정 해 주면 된다. pubspec.yaml은 스페이스 간격에 예민하기 때문에 간격을 잘 맞춰주지 않으면 에러가 난다.

assets: 앞에는 스페이스 두번.
- images/ 앞에도 스페이스 두번. - 다음에는 스페이스 한번. images 폴더 안에 있는 모든 이미지 파일들을 앱에 패키징 해 줄 필요가 있다면 이걸로 족하지만, 만약 특정 이미지 파일만 골라서 패키징 할 거라면 특정 파일명을 직접 지정 해 줄 수도 있다. - images/123.jpeg 이런 식으로 한 줄 씩 추가해서 지정 해 주면 된다.

fonts: 앞에는 스페이스 두번.
- family: 앞에는 스페이스 네번. 그리고 한칸 띄고 폰트이름을 스페이스 없이 지정 해 준다. 여기서 지정 해 준 이름이 나중에 앱의 폰트 바꿀 때 지정 할 이름으로 사용한다. 본인이 알기 쉽고 외우기 쉬운 이름으로 정해주자.
폰트 이름을 정했으면 폰트 파일을 지정 해 줄 차례.
- family: 아래에 다시 fonts: 라고 써 준다. f의 위치를 맞춰준다.
그리고 그 아래에 - asset: 을 써 주고 한칸 띄고 폰트 파일의 위치를 적어준다.
italic용 폰트가 따로 있을 경우에는 따로 설정 해 준다.

fonts:
    - family: SFPro
      fonts:
        - asset: fonts/SF-Pro.ttf
        - asset: fonts/SF-Pro-Italic.ttf
          style: italic

이런 식으로 설정 해 주면 된다.
폰트는 너무 많은 걸 사용하면 조잡하기 때문에 많아도 3가지 정도만 사용하는게 권장되고 있다.

#저장하기

pubspec.yaml 파일의 수정이 끝났으면 저장 해 주고 "Pub get"과 "Pub upgrade"를 차례로 클릭해서 반영을 해 준다. 만약 이 과정 중에 에러가 난다면 스페이스 간격이 잘 못 된 경우가 대부분이기 때문에 스페이스 간격을 다시 한번 확인 해 보자.

이것으로 이미지와 폰트 파일을 앱에서 사용 할 수 있도록 하는 설정은 끝 :)