Flutter Image Developer Guide

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.

Flutter Image Developer Guide

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.

Flutter Assets Images

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

Add images to your flutter project

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.

1. If using Android Studio — Save the file and Click Packages get in action ribbon.
2. If using VS Code : It automatically runs command on saving pubspec.yaml file.

Flutter 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 :

assets:
- assets/images/

• 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.

Coding : Flutter Sample App Code

Flutter Image Class

Originally published at https://blog.akshatapp.com on November 28, 2019.