[flutter]flutter app에 image 파일 넣기( + Unable to load asset 오류)

오늘은 아주 간단하지만 사소한 것으로 애 먹었던...경험에 대해서 적어보려고 한다.

flutter app에 image 넣기

처음 플러터 UI를 그렸을 때 이미지 파일을 넣을 일이 있었는데, 파일명과 다 동일하게 경로를 작성했다고 생각했는데도 경로를 찾을 수 없다고 오류가 발생했다.

먼저 이미지 파일을 넣고 불러오는 과정은 아래와 같다

 

1. assets/image 폴더 만들고 필요한 이미지를 해당 폴더에 넣기

2. pubspe.yaml 파일에 이미지 경로 저장해주기

//pubspec.yaml

...

assets:
    - assets/images/icon.png

3. 이미지 사용할 파일에서 아래와 같이 image.asset을 이용해서 이미지 불러오기

//이미지 사용할 widget

SizedBox(
	height: 60,
    width: 60,
    child: ClipRRect(
    	borderRadius: BorderRadius.circular(50.0), // 이미지 borderRadius 효과주기
        child: Image.asset(
        	'assets/images/icon.png',
        )),
 ),

 

하지만 이렇게 작성하고 경로가 맞는지도 몇 번 확인했는데도 Unable to load asset 오류가 발생했다.

한참을 뒤져보다가 발견한 오류 이유 pubspec.yaml 파일에 경로를 작성해줄 때 줄이 맞지 않아서였다...

위 사진이 맞는 정렬의 줄인데, flutter의 자동정렬에 익숙해져서 줄은 신경쓰지 않고 아래와 같이 작성해버린 것이다..

assets 폴더에 이미지가 저장되어 있는 것을 모르니, 불러와질리도 없고, 계속해서 unable to load asset 오류가 발생한 것이였다.

yaml 파일은 괄호나 쉼표를 사용하지 않기 때문에 파일의 들여쓰기로 알 수 있는데, 아래의 경우 flutter와 같은 라인에 있어서 제대로 인식을 못한 것이다

해당 부분을 들여쓰기로 수정한 뒤 저장 (pub get)을 하고야 제대로 이미지를 불러올 수 있었다

잘 출력되는 것 확인 !!!