[Flutter] Unable to load asset 오류 해결

 

Unable to load assset에러는 이미지를 load할 때 심심치않게 발생하는 에러이다. 말 그대로 리소스를 load할 때 발생하는 에러라는 것을 바로 알 수 있는데, 원인을 쉽게 알 수 있는 것과 달리 에러를 해결하는데 꽤나 시간이 소요될 수 있다. 그 이유는 리소스를 load하지 못하는 이유가 너무 다양하고, 개발자의 실수가 아닌경우도 있기 때문이다. 나 또한 이 에러때문에 꽤나 시간을 낭비한 경험이 있어 에러 해결 과정을 기록하기로 하였다. 아래 순서대로 실행한다면 아마 99%는 에러를 해결할 수 있을 것이다.

 

우선 리소스에 변경이 있을 때, hot reload 혹은 hot start만으로는 리소스 변경을 제대로 캐치하지 못하는 경우가 있다. 이럴때는 아래 명령어를 통해 캐시를 삭제하고, 변경사항을 다시 적용한다. 

flutter clean
flutter pub get

 

flutter pub get이 완료되면, pubspec.yaml 에 오류가 없는지 확인한다. 지금 확인해야할 부분은 리소스가 들어있는 asset이 정상적으로 등록되어 있는지를 보아야 한다.

 

flutter:
  assets:
    - assets/images/          // 폴더를 등록
    - assets/logos/test.png   // 파일을 등록

 

여기서 flutter와 assets, assets와 - 사이에는 띄어쓰기가 2개, - 와 assets 사이에는 띄어쓰기가 1개만 존재해야 한다. 이부분에서 많은 사람들이 실수를 범하기 때문에 필수적으로 체크를 하여야 한다.

 

또한, 내가 사용할 파일의 경로가 폴더로 등록되어있는지, 파일로 등록이 되어있는지도 확인을 하고 넘어가야한다.

 

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Asset Example'),
        ),
        body: Center(
          child: Image.asset('assets/images/my_image.png'),
        ),
      ),
    );
  }
}

마지막으로 파일의 경로, 파일명을 확인한다. 이미지는 'assets/ ~~'의 경로를 직접 참조하는 것이 가장 올바른 방법이다. 만약 이후에도 unable to load asset에러가 반복된다면, 파일의 상태와 경로를 체크 하고, 빌드가 제대로 이루어졌는지를 다시 확인한다.