Unable to load asset: assets/image1 (Flutter)

Issue

enter image description here

I encountered this problem a few days ago and I was not sure how, but I managed to solve it. I still don’t have a clue about what actually causes it. Whenever I create a new flutter project and try to add asset images in my app it throws this error:

======== Exception caught by image resource service ================================================
The following assertion was thrown resolving an image codec:
Unable to load asset: assets/image01

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:672:14)
<asynchronous suspension>
Image provider: AssetImage(bundle: null, name: "assets/image01")
Image key: AssetBundleImageKey(bundle: PlatformAssetBundle#abc8a(), name: "assets/image01", scale: 1.0)
====================================================================================================

I surfed for a while to find a solution but I was unable to find one, sometimes I just restart the app and run ”’flutter clean”’ to fix it but it isn’t working this time. I don’t know what to do, the pubsec.yaml and and the code seems to be working fine. I’ve tried creating new projects and rebuilding gradle but it’s no good. Please provide descriptive and helpful answers.

Here’s the code:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        backgroundColor: Colors.teal,
        body: SafeArea(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Center(
                child: CircleAvatar(
                  radius: 100,
                  backgroundColor: Colors.blue,
                  child: Image.asset('assets/image01'),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

And here’s pubsec.yaml

name: mi_card
description: A new Flutter project.

publish_to: 'none'

version: 1.0.0+1

environment:
  sdk: ">=2.12.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^1.0.2

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:

  uses-material-design: true

  assets:
    - assets/

Solution

Try below code

Add below code in pubspec.yaml file.

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

and create Image Widget, add your image path that save you in any folder like assets/image.png with your image extension

Center(
            child: CircleAvatar(
              radius: 100,
              backgroundColor: Colors.blue,
              child: Image.asset('assets/image01.png'),
            ),
          ),
        

Answered By – Ravindra S. Patil

Answer Checked By – Terry (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published.