FlutterError: Unable to load asset

Question

This is the folder structure of my app

.idea
.vscode
android
build
fonts
 Oxygen-Bold.tff
 Oxygen-Light.tff
 Oxygen-Regular.tff
images
 pizza0.png
 pizza1.png
ios
lib
 ui
  home.dart
 main.dart
test
.gitignore
.metadata
.packages
app_widgets.iml
pubspec.lock
pubspec.yaml
README.md

In my pubspec.yaml file, I load the fonts and assets like this

flutter:
uses-material-design: true
assets:
  - images/pizza0.png
  - images/pizza1.png
fonts:
  - family: Oxygen
    fonts:
      - asset: fonts/Oxygen-Regular.ttf
      - asset: fonts/Oxygen-Bold.ttf
        weight: 700
      - asset: fonts/Oxygen-Light.ttf
        weight: 300

I'm not getting any errors for this pubspec.yaml, and running flutter packages get gives an exit code of 0.

In my home.dart I have the following class:

class PizzaImageWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    AssetImage pizzaAsset = AssetImage('images/pizza0.png');
    Image image = Image(image: pizzaAsset, width: 400, height: 400);
    return Container(
      child: image,
    );
  }
}

Which I use elsewhere, in order to show the image (code omitted):

        ),
        PizzaImageWidget(),
      ],

The building gives no errors. Flutter Doctor -v doesn't give any errors, neither does Flutter Analyze -v. The .apk seems to build just fine but when the app opens up on my phone I get the following error in asset_bundle.dart:

Exception has occurred. FlutterError (Unable to load asset: images/pizza0.png)

The error is thrown by this class in the asset_bundle.dart file:

/// An [AssetBundle] that loads resources using platform messages.
class PlatformAssetBundle extends CachingAssetBundle {
  @override
  Future<ByteData> load(String key) async {
    final Uint8List encoded = utf8.encoder.convert(Uri(path: Uri.encodeFull(key)).path);
    final ByteData asset =
        await BinaryMessages.send('flutter/assets', encoded.buffer.asByteData());
    if (asset == null)
      throw FlutterError('Unable to load asset: $key');
    return asset;
  }
}

This happens both for the pizza0.png file as well as the pizza1.png file. The files are visible in the tree structure, both in Windows Explorer as in VS Code. The font assets load without issue.

This is the output I am getting when running Flutter Run -v:

[+1068 ms] I/flutter ( 6489): ══╡ EXCEPTION CAUGHT BY IMAGE RESOURCE SERVICE ╞════════════════════════════════════════════════════ [ +9 ms] I/flutter ( 6489): The following assertion was thrown resolving an image codec: [ +2 ms] I/flutter ( 6489): Unable to load asset: images/pizza0.png [ +2 ms] I/flutter ( 6489): [ +1 ms] I/flutter ( 6489): When the exception was thrown, this was the stack: [ +2 ms] I/flutter ( 6489): #0 PlatformAssetBundle.load (package:flutter/src/services/asset_bundle.dart:221:7) [ +1 ms] I/flutter ( 6489): [ +1 ms] I/flutter ( 6489): #1 AssetBundleImageProvider._loadAsync (package:flutter/src/painting/image_provider.dart:429:44) [ +1 ms] I/flutter ( 6489): [ +1 ms] I/flutter ( 6489): #2 AssetBundleImageProvider.load (package:flutter/src/painting/image_provider.dart:414:14) [ +1 ms] I/flutter ( 6489): #3 ImageProvider.resolve.. (package:flutter/src/painting/image_provider.dart:267:86) [ +4 ms] I/flutter ( 6489): #4 ImageCache.putIfAbsent (package:flutter/src/painting/image_cache.dart:143:20) [ +3 ms] I/flutter ( 6489): #5 ImageProvider.resolve. (package:flutter/src/painting/image_provider.dart:267:63) [ +3 ms] I/flutter ( 6489): (elided 8 frames from package dart:async) [ +1 ms] I/flutter ( 6489): [ +1 ms] I/flutter ( 6489): Image provider: AssetImage(bundle: null, name: "images/pizza0.png") [ +3 ms] I/flutter ( 6489): Image key: AssetBundleImageKey(bundle: PlatformAssetBundle#20fc8(), name: "images/pizza0.png", [ +1 ms] I/flutter ( 6489): scale: 1.0) [ +2 ms] I/flutter ( 6489): ════════════════════════════════════════════════════════════════════════════════════════════════════

Solution 1

You should consider the indentation for assets

flutter:
  assets:
    - images/pizza1.png
    - images/pizza0.png

More details:

flutter:
[2 whitespaces or 1 tab]assets:
[4 whitespaces or 2 tabs]- images/pizza1.png
[4 whitespaces or 2 tabs]- images/pizza0.png

After all this, you can make a hot-restart.

Solution 2

I have the same issue. I've just run "$ flutter clean", then everything is OK.

More about this error

Solution 3

The simplest way is to reference your assets folder instead of the asset itself, just make sure you use proper indentations as the pubspec.yaml is indent sensitive.

flutter:
  uses-material-design: true
  assets:
    - images/

and you can simply access each image as

  Image.asset('images/pizza1.png', width:300, height:100)

Solution 4

For me,

1. flutter clean,
2. Restart the android studio and emulator,

3. giving full patth in my image

   image: AssetImage(
     './lib/graphics/logo2.png'
      ),
      width: 200,
      height: 200,
    );
   

these three steps did the trick.

Solution 5

Encountered the same issue with a slightly different code. In my case, I was using a "assets" folder subdivided into sub-folders for assets (sprites, audio, UI).

My code was simply at first in pubspec.yaml- alternative would be to detail every single file.

flutter:
  assets:
    - assets

Indentation and flutter clean was not enough to fix it. The files in the sub-folders were not loading by flutter. It seems like flutter needs to be "taken by the hand" and not looking at sub-folders without explicitly asking it to look at them. This worked for me:

flutter:
  assets:
    - assets/sprites/
    - assets/audio/
    - assets/UI/

So I had to detail each folder and each sub-folder that contains assets (mp3, jpg, etc). Doing so made the app work and saved me tons of time as the only solution detailed above would require me to manually list 30+ assets while the code here is just a few lines and easier to maintain.

View more solutions

Comments

[Matthias]

@diegoveloper Yes, the fonts work but both images give this error.

[diegoveloper]

are you using spaces before the assets keyword?

[Matthias]

The yaml file is OK. I have a yaml extension in VS Code which gives no errors, and yamlint.com says it's good as well.

[diegoveloper]

yep, you don't get errors if you don't add indentation but you couldn't get the image

[AldaronLau]

I have same issue, I found warning that might be useful while building: "Error: unable to find directory entry in pubspec.yaml"

[AldaronLau]

Guess I had 2 clones of the repo and put images in the one I wasn't using lol

[Doochz]

I solved this with close Android Studio and emulator, then give flutter clean.

[thanhbinh84]

If all solutions don't work, try to add package name aside the asset name: SvgPicture.asset('assets/asset_name.svg', package: package_name);

[Matthias]

If I do that, flutter packages get fails: Running "flutter packages get" in app_widgets... Error on line 40, column 3 of pubspec.yaml: Expected a key while parsing a block mapping. assets: ^ pub get failed (65) exit code 65

[diegoveloper]

just add two spaces

[Matthias]

Spaces where exactly? Right now I have the words flutter, and assets sticking all the way to the left with no spaces. If I add a space, or two, before the word assets I get the exit code 65 error.

[diegoveloper]

2 white spaces (or 1 tab) before assets and 4 white spaces (or 2 tabs) before - images...

[Matthias]

Nope. Gives the same error... This is my full file by the way: pastebin.com/ygzkTgHG

[Matthias]

Turns out the "uses-material-design: true" is the culprit here. Commenting that out, or changing the indendation of that part makes it work. Seems like a weird oversight/bug that the fonts work just fine like that but the assets don't.

[PGMacDesign]

Matthias' comment above worked for me, but I should note that even with that set to true, SOME of my assets worked while others did not. It looks like it is just something incorrect on the flutter end.

[Wojciechu]

Make sure that you are adding assets to "flutter:" not to "dependancies: flutter:" which is first one in the pubspec.yaml

[dan-gph]

Thanks. This was my problem. Actually I had the wrong indentation too. So people should check their indentation and also run flutter clean.

[Golden Lion]

flutter clean worked. I wonder why pubspec.yml changes don't automatically run flutter clean

[Alexandre Jean]

On a side note - there are packages like audioplayers that will not load assets properly if you use code like plyer.play('assets/audio/sound.mp3') in your dart file widgets. While plyer.play('audio/sound.mp3') will load properly. That also can create some very frustrating debugging. So I wanted to add it.

[Mahesh Jamdade]

please specify what it does and where to use it, that completes your answer :)

[live-love]

Best answer, does not need to add file names.

[Mahesh Jamdade]

glad I could help :)

[houba]

@James Allen: you are an absolute genius. To figure that out , you're a smart guy.

[Digit Plays]

This worked for me, tried all answers above and this is what fixed it. lol.

[Guillaume Petit]

Matthias comment did the trick, commenting and uncommenting fixed it. Definitly something is wrong in flutter

[Michele]

From Android Studio, in my case the issue would happen only when using hot-reload. Triggering a rebuild by pressing the STOP button and then the PLAY button solved it (I'm using the integrated Android emulator)

[bondythegreat]

re-run the app solves the problem. i wasted my 10m time ignoring this answer and keep trying check syntax+tab/spaces etc.. :P

[A.J]

I also have the same issue when I was developing my first app with dependency. in pupspec.yaml . These are sensitves. This was a solution for me.

[Luigi]

@Michele I'm with you. I had to do the hot restart. That fixed it

[Trần Trung Hiếu]

This worked for me. I had the same problem

[lava]

indentation main problem.After i change indentation .it did'nt work .After flutter clean work .so tries this more

[Muhammad Junaid Khalid]

Worked in my case

[Lukas Luke Stateczny]

For some reason this doesn't work for me. I have to import every single image for it to work and I have thousands of them.

[Mahesh Jamdade]

I just checked and it seems to be working as of stable 2.5.2, I would love to take a look if you could share your pubspec.yaml as a gist

[Think Big]

Backslash not working.

[Thomas David Kehoe]

Restart Android Studio after running flutter clean. Worked for me.

[ghifari.akbar]

make sure you put "/" such as "assets/icons/" not "assets/icons"

[68060]

one of the worst things about flutter, takes me 35 minutes to load an image every time

[Kalana Perera]

this is work, its best to check what are the assets folders given in the pubspecs.yml