In this guide we will learn how to display images in your flutter app.
We will use Flutter Image Class to implement images in flutter.
step 1 : Create “assets/images” folder in your project directory
- Create “assets” folder in your project root directory.
- Create “images” folder in your assets folder.
Note : Your “assets” folder will have “images” and many other project assets like “fonts”, “icons”, “animation files” etc.
step 2 : Add images to your “images” folder
- Just drag-n-drop your image inside the “images” folder
- Image Relative Path : assets/images/bluetruck.png
step 3 : Register your assets folder in pubspec.yaml file
- Open pubspec.yaml file
- Add assets subsection to the flutter section or uncomment the assets section and add your image relative path.
- Save the pubspec.yaml file and run “flutter pub get command” in terminal.
- If using Android Studio — Save the file and Click Packages get in action ribbon.
- If using VS Code : It automatically runs command on saving pubspec.yaml file.
Note : If you have multiple images that you want to include in your project then you can skip the filename.
For Example :
- This includes all the images inside “images” folder.
- This is helpful when we have many images to be included in our project.
- Say, we have 25 images in our “images folder” so we will not have to register each image filename inside pubspec.yaml file separately.
- Using the above syntax we can include all images in a single line.
step 4 : Code Implementation - Use Flutter Image class
Flutter Image Class - Documentation
Also refer official class documentation with this guide to deeply understand the concept.
Let us start with the simplest way to display images in our flutter app.