3 min read

Any mobile app would be monotonous if it doesn’t contain some sort of media such as images or videos. In Flutter, any such resource is called assets. But when you add the assets (e.g. Images, Videos, PDF files) you may make some mistakes and get an error while trying to load the asset. So in this tutorial, we’ll learn how to fix the error called Unable to Load Asset in Flutter.

Here’s what we’ll cover:

What Does the Error Looks Like?

This is what the error looks like when you try to add an image to your Flutter app.

======== Exception caught by image resource service ================================================
The following assertion was thrown resolving an image codec:
Unable to load asset: assets/images/logoo.png
When the exception was thrown, this was the stack: 
#0      PlatformAssetBundle.load (package:flutter/src/services/asset_bundle.dart:224:7)
<asynchronous suspension>
#1      AssetBundleImageProvider._loadAsync (package:flutter/src/painting/image_provider.dart:675:14)
<asynchronous suspension>
Image provider: ExactAssetImage(name: "assets/images/logoo.png", scale: 12.0, bundle: null)
Image key: AssetBundleImageKey(bundle: PlatformAssetBundle#4cad7(), name: "assets/images/logoo.png", scale: 12.0)
====================================================================================================
unable to load asset in flutter

You also must be getting an error on your screen that looks like this:

unable to load asset error in screen

Why Did you Get this Error?

There can be any of the following reasons for getting this error:

  1. Spelling mistake in the image name
  2. Wrong Image path provided (Image doesn’t exist at specified location)
  3. Wrong indentation for assetsin pubspec.yaml file

TLDR: You haven’t added images correctly in your Flutter App.

Steps to Fix Unable to Load Asset in Flutter

To fix the unable to load asset in Flutter, you can either verify the image path that has correct image spelling or give a proper indentation in pubspec.yaml file.

Here are the steps to fix the error:

Step 1: Make sure you have added the correct image path (without a spelling mistake). 

Note: To always get the correct image path right click on the image -> select Copy Path.. -> select Path From Content Root and then paste the image path.

getting correct image path in flutter

Step 2: Verify that you have the correct indentation path that looks like below.

# To add assets to your application, add an assets section, like this:
assets:
  - assets/images/
  - google_fonts/
giving proper indentation in flutter

Conclusion

In this tutorial, we learned how to fix the unable to load asset in Flutter in 2 easy steps with practical examples. We first saw what this error looks like and then understood the cause of the error. We also saw how to get the correct image path so that we don’t face such errors in the future as well.

Would you like to check other interesting Flutter tutorials?