Show Image From Local Assets Folder in Flutter Android iOS Tutorial

Image is a type of graphical visual representation of an object where we can see all the object details. In flutter we can add image locally using Image.asset() widget. Image widget comes with Flutter material.dart package. So in this tutorial we would Show Image From Local Assets Folder in Flutter Android iOS Example Tutorial.

Contents in this example Show Image From Local Assets Folder in Flutter Android iOS Tutorial:

1. Before getting started we need to first create and define the assets/images folder path in our project’s Pubspec.yaml file. This file contains useful information about our flutter project like project meta data and dependencies name. So open your Flutter project and Create a folder named as assets.

2. After creating the assets folder now we need to make a folder named as images inside the assets folder. In this folder we would put our all local images.

3. Now i am copying my sample image in this images folder. My image name is sample_image.jpg .You could use your own image here.

4. Open your Flutter project main directory and open Pubspec.yaml file in any code editor.

5. Find flutter block and put the assets/images folder path just below it.

6. Here is the complete source code of my Pubspec.yaml file after adding assets path.

7. Now all the main steps done. Its time to start coding, Open your project’s lib/main.dart file.

8. Import material.dart package in your project.

9. Call your main designing class using main function. In this case my main class name is MyApp.

10. Creating your main MyApp class extends with StatelessWidget. In below code i have adding the Application App bar, then starts the body section. In the body section first putting a layout named as Center which is our parent layout. In Center can hold only child so we would give it a Column named child. Column supports multiple children.

11. Creating Image widget with assets() in Column parent. Here we are passing the local image path using assets syntax.

fit: BoxFit.fitWidth is used to set image width full as its parent layout.

12. Complete source code for main.dart file:

Screenshot:

Leave a Reply

Your email address will not be published. Required fields are marked *