How to add an Image widget in Flutter

Introduction

So, in the last video, you have seen how to fetch an image from the Internet using a Network Image URL.

In this tutorial, you will see how you can work with image assets that you can load on your app so that you don’t need to fetch them from the internet & you can use them anywhere in your app without having an internet connection.

Setup

For creating a Flutter Project and Importing your Image. Do the following steps:

• We will create a folder in our project named as Images folder.
• Then, we will place all of our images in it.

So, now that we have incorporated images into our project, it’s time to tell Flutter where our images are stored & for that, we will go to our configuration file which is Pubspec.yaml.

What is YAML?

Firstly, we will see what is a YAML file. YAML stands for YAML ain’t Markup Language YAML is a human-readable data-serialization language. It is commonly used for configuration files and in applications storing or transmitting data.

YAML Configuration

So, here in this configuration file, we can add the SDK version, assets, fonts, etc in here.

Let’s go ahead & uncomment assets by pressing CTRL + /. After that, replace your image file in it & remember, you have to take care of the indentation. One tab is required for the main heading & two tabs are required for the sub-heading. So, keep that in mind.

So, now we have to save this file by pressing CTRL + S & after that, you will see this option which is PUB GET & by doing this, we will be able to use it in our main.dart file or any other project file.

Image Asset Widget

So, now, we can head back to our main.dart file, and instead of using Network Image, we will use a different type of image which is Asset Image & now in asset image, we will incorporate our image by typing a single quote and folder name and image file name & it knows what is “images/jb.png” is because we added it to the configuration file.

import 'package:flutter/material.dart';

void main() => runApp(
      MaterialApp(
          home: Scaffold(
            backgroundColor: Colors.amber,
            appBar: AppBar(
              backgroundColor: Colors.amber,
              title: Text('Jbtronic'),
            ),
          body: Center(
            child: Image(
              image: AssetImage('images/jb.jpg'),
          ),
        ),
      )),
    );

So, now all we have to do is run our App and see it. Let’s click the play button, and then you will see that our image is incorporated in the center of our app.

How to add multiple Image Assets

If you want to add multiple images to our configuration file. Then, it would be a hectic task.

So, for that, you can also type images and then forward slash “/” only. It will get everything inside that folder into our project & then just hit get packages & you are good to go.

Now, if we run our app again, there will be no changes as long as your images will be in the images folder that we created. So, that makes your life easier.

GitHub Repo

You can download my code from my GitHub: https://github.com/JBtronic/Flutter-Youtube-Tutorial/tree/main/working_with_assets_pubspec_file

Complete Flutter Tutorial

You can see my complete Flutter Tutorial Series on my Website: https://www.youtube.com/watch?v=EdJwOGoMgAY&list=PLMstFUjTFBs7_Rorn097UD2hCS-UCm88a