Unable to load asset: assets/image1 (Flutter)

Question

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/

Answer 1

You have to specify the extension of your image (ie image01.png)

child: Image.asset('assets/image01.png')

Answer 2

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'),
            ),
          ),
        

Answer 3

First create folder - best name (images). Put your picture, all of the pictures you want, calling. Then go to the pubspec.yml page edit portion of the picture.

flutter:
  uses-material-design: true //two space 
  assets:                    //same up space 
    - images/                //two speace after asset 

Then go to your code add all paths. Example:

backgroundImage: AssetImage("images/ss.jpeg"),