Unable to load asset: assets/image1 (Flutter) - 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

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 2

You have to specify the extension of your image (i.e. image01.png)
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"),