Adding Images in Flutter

This is the sixth lesson of the Flutter series. Today we are going to learn on adding an image in Flutter UI.

Image Assets

We define images as assets. To add images first we create a folder. Let us name it as “images”. On that we can paste an image that we want by right clicking on it.

Now we should declare this image in pubspec.yaml file. Uncomment the first two lines in asset section there. Now you can define your image name.

In home.dart file you can see that “pubspec has been edited” “Get dependencies”. Click on “Get dependencies”.

Let us create a new class “JewelleryImageAsset” that extends from stateless widget class. Then override our build method. Here we can define our asset image. As a parameter we should pass asset name which we used in pubspec.yaml file.

Then define the container where we use image and return it in build method.

Let’s make this image as the third element of the column.

You will receive the following output.

We are done now. Hope you got clear understanding on how to add an image in flutter UI. Happy learning!!!

Hirudini Udugama