Flutter Chapter-01-03 Yaml 파일 사용법

저번 챕터에서는 기본적인 scaffold 구성을 살펴보았다.

웹브라우저 안에 있는 Url을 호출하였다면, 현재는 나의 리소스&이미지 파일을 환경설정을 통해 앱과 연동시키는 방법을 알아보겠다.

일단 첫 번째로 Yaml 파일 구성 및 간단 설명을 시작하도록 하겠다.

플러터 프로젝트를 시작하면 위 이미지와 같이 pubspec.yaml 파일이 기본적으로 세팅이된다.

이 파일의 기본적인 역할은

1. 프로젝트 설명

2. 외부 패키지 지원

3. 리소스 & 이미지 파일 참조 

등등 많은 역할들이 있다.

 

 

현재 설정된 pubspec.yaml 파일

# 프로젝트이름
# 프로젝트 설명
name: flutter_ch_01
description: A new Flutter application.

publish_to: 'none' # Remove this line if you wish to publish to pub.dev

#현재 앱 버전
version: 1.0.0+1

## 두개의 띄어쓰기는 내부의 자식이라는것을 의미한다. 이것은 yaml 파일을 적을때 매우 중요하다. 띄어쓰기 까지 인식 하기 때문에
environment:
  sdk: ">=2.7.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2

dev_dependencies:
  flutter_test:
    sdk: flutter

##플루터의 셋팅을 설정해준다.
flutter:
  ## 머트리얼 디자은을 사용할 것이다.
  uses-material-design: true
    ## 사용하려는 자산
    ## 공백 3칸 이것을 어길시 에러가 떨어진다.
  assets:
    - images/coverImage.jpg

 

플러터를 하면서 많이 하는 실수가 있다.

플러터 yaml 파일은 띄어쓰기까지 인식하기 때문에 해당하는 띄어쓰기가 맞지 않을 경우 에러가 발생하고, 어떤 부분이 틀렸는지 헤매는 경우가 많다.

때문에 이 부분은 집고 넘어가도록 하겠다.

 

플르터 .yaml 파일 띄어쓰기 인식

해당하는 부분은 2칸과 3칸 여러 칸으로 나누어져 있는데, 해당하는 형식을 안 지킬 시 위와 같은 에러가 발생한다.

Error on line 29, column 4: Expected a key while parsing a block mapping.
   ╷
29 │    assets:

 

1. 이미지와 리소스 불러오는 방법

현재 기본적인 yaml 파일이 작성되었다면, 이번 시간에는 리소스와 이미지를 불러오는 것까지 진행하고, 다음 시간에 사용될 때 외부 패키지 참조는 추가로 설명하도록 하겠다.

 

이미지 참조설명

위 이미지를 보게 되면 yaml 파일에서 내부 프로젝트 images 디렉터리의 파일을 참조하는 모습을 볼 수 있다.

이렇게 assets:의 자식에게 해당하는 디렉터리 혹은 파일을 적게 되면 플러터 소스코드에서 해당하는 이미지를 인식하고 참조할 수 있게 세팅되며 내부의 이미지를 참조한 앱의 모습은 아래와 똑같게 출력되는 것을 확인할 수 있다.

앱실행 결과

 

 

 

도식화

이번 시간에는 yaml의 이미지와 리소스를 불러오는 것을 알 수있었다.

yaml의 파일은 사용하기 편하나 띄어쓰기가  중요한 부분이라는 것을 알 수 있었다.

 

참조문헌

https://flutter-ko.dev/docs/development/packages-and-plugins/using-packages