Flutter Image Developer Guide

Flutter Image Developer Guide
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
Flutter Assets Images

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
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
Flutter pubspec.yaml file
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

Coding : Flutter Sample App Code

Flutter Image Class
Flutter Image Class

Useful Resources

--

--

--

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

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
AkshatApp

AkshatApp

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

More from Medium

Is Kotlin Better Than Flutter?

Using WebView with Flutter

Flutter environment

Flutter MethodChannel