How to Add custom image or icons in Flutter from Assets Folder – Easy Guide

If you build a project with Flutter App, you will face a major problem. The issue is adding the Asset images. We write the direction of all the images in the pubspac.yml file. This situation is worrying. Thus, we will show all the folder’s asset images in one line. This will help us organize all the images.
Here we will see Step by Step, how to change what is changing.

If all the image files want to declare by separately

flutter:
  assets:
    - assets/icons/img_logo.png
    - assets/icons/home.png
    - assets/icons/profile.png

Note: It will only work on declare files. (If you give img_logo.png as you just like that will worked)

To gate all the images by declare the whole folder –

flutter:
  assets:
    - assets/icons/

Note: It will work on all the image files of the assets/icons/ folder. No need to write separately.

Why not getting on your declared folder images?

You declare the folder. However, the problems may be due to various reasons. Let’s check it out to understand why it’s happening!

Check the folder empty or hidden file: to see if there are actually PNG files inside the assets/icons/
Spelling Mismatch: pubspec.yml wrote the icons, but if the folder name is icon/ then Error will come.
Indentation Problem: Confirm Assets, Below it is written with 4 space.

flutter:
  assets:
    - assets/icons/

Capital/Small Letter at File Path: Flutter Case-Sensitive. Such Logo.png and logo.png are different. So if something like this, change it.
pub get not run: Flutter pub get Run again.
If all of the above does not work, then do this work, pub get again by cleaning flutter project, run those command-

flutter clean
flutter pub get

Note: Many times after adding the Asset, the flutter pub gets the hot reload. However, changes do not reflect on the hot reload.
Solution: flutter clean & flutter pub get then Run Again.

Some of the Beginners Common Questions:

How do I add a logo in Flutter without declaring each image?

You can declare the whole folder in pubspec.yaml (- assets/icons/) instead of adding each file. In this way, all png, jpg images in that folder will be available instantly.

Why is my Flutter asset image not showing?

Common reasons are wrong indentation in pubspec.yaml. Missing flutter clean, or a mismatch in file name folder or files (Flutter is case-sensitive).

Can I use PNG icons as Flutter icons?

Yes, you can use ImageIcon(AssetImage(“assets/icons/logo.png”)) to show your png images as icons in AppBar, BottomNavigationBar, or buttons etc.

Do I need to add every single image in pubspec.yaml?

No, just declare the folder path. For example – assets/images/ will include all images in that folder.

Q1: How do I add a logo in Flutter without declaring each image?
A1: You can declare the whole folder in pubspec.yaml (- assets/icons/) instead of adding each file. In this way, all png, jpg images in that folder will be available instantly.

Q2: Why is my Flutter asset image not showing?
Common reasons are wrong indentation in pubspec.yaml. Missing flutter clean, or a mismatch in file name folder or files (Flutter is case-sensitive).

Q4: Do I need to add every single image in pubspec.yaml?
A4: No, just declare the folder path. For example – assets/images/ will include all images in that folder.