Skip to main content

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
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
Add images to your flutter project
Add images to your flutter project
  • 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.
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/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.

To learn more about flutter - Flutter Developer Guide

step 4 : Code Implementation - Use Flutter Image class

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
Flutter Image Class
Unauthorized use and/or duplication of this material without express and written permission from this site’s author and/or owner is strictly prohibited.The materials(images, logos, content) contained in this web site are protected by applicable copyright and trade mark law.

Flutter, Android and the Android logo are registered trademarks of Google LLC.

Popular posts from this blog

Step-by-Step Guide to create a new flutter project using Visual Studio Code [VS Code]

This is a beginner's guide to visual studio code and flutter. VS Code is a light weight editor with flutter app development, execution and debug support. Visual Studio Code is a source-code editor developed by Microsoft. Install latest stable version of VS Code Install the Flutter and Dart plugins In VS Code "Extensions" Tab, search field type flutter, select "Flutter" in the list and click "Install". Flutter plugin also installs the required Dart plugin. Validate your flutter setup using "flutter doctor command". Once Flutter SDK and your VS Code Editor is up and running, Flutter Visual Studio Code To Create a new flutter project from the flutter starter app template follow the below steps step 1 : Open Command Palette Use Shortcut key - Ctrl+Shift+P or Cmd+Shift+P on macOS OR Go to View Menu, select "Command Palette" VS Code Command Palette step 2 : Create Flutter New Project Sele

Step-by-Step Guide for Flutter Android APK Signing and Release

In this guide we will learn how to sign the release version of apk or aab(android app bundle) to publish our flutter app to android play store. flutter release apk How to sign the apk or app bundle created using flutter ? To publish your app on Play Store, you need to give your app a digital signature. step 1 : Create a new keystore file ; if you have an existing keystore , skip this step Run command in your terminal for linux/mac keytool -genkey -v -keystore ~/key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias key On Windows, use the following command: keytool -genkey -v -keystore c:/Users/USER_NAME/key.jks -storetype JKS -keyalg RSA -keysize 2048 -validity 10000 -alias key Fill in the required info inside the terminal Enter keystore password: test@12345 Re-enter new password: test@12345 What is your first and last name? [test]: test What is the name of your organizational unit? [test]: test

Step-by-Step Guide to take a App Screenshot with the Device Frame using Android Studio

This guide will help you to take a screenshot with the device frame using android studio. If we capture screenshot using the default android emulator "Capture Screenshot" option, then screenshot will not have the device frame. Android Emulator - Screen Capture By using android studio we can capture screenshot with different devices frame. How to take a App Screenshot with the Device Frame using Android Studio step 1 : Load your project in android studio and run the app Open Android Studio Load your android app project in android studio.  Build and Run your app using android emulator or a connected physical device.  If you are using a physical device make sure that you have enabled USB DEBUGGING option. Android Studio - Load Project step 2 : Open Logcat in Android Studio Check out bottom left corner in android studio to find Logcat option and click to open Logcat If it is not visible then select "View Menu" and search for