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
Flutter Image Developer Guide
  • Create “assets” folder in your project root directory.
  • Create “images” folder in your assets folder.
Flutter Assets Images
Flutter Assets Images
Flutter Assets Images

Note : Your “assets” folder will have “images” and many other project assets like “fonts”, “icons”, “animation files” etc.

  • Just drag-n-drop your image inside the “images” folder
  • Image Relative Path : assets/images/bluetruck.png
Add images to your flutter project
Add images to your flutter project
Add images to your flutter project
  • 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
Flutter 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.

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.

Flutter Image Class
Flutter Image Class
Flutter Image Class

Useful Resources

Learn more about flutter at AkshatApp.com

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

Helping designers and developers build high quality websites and cross platform mobile apps with our step-by-step developer guides 📚 at akshatapp.com

Helping designers and developers build high quality websites and cross platform mobile apps with our step-by-step developer guides 📚 at akshatapp.com