How to add an image in a flutter

Steps to Add an Image in Flutter

To add an image in the Flutter app, first of all, create a assets/images folder and then add the actual images inside the folder. After this, Add the image path pubspec.yaml and then display it using the Image.asset() widget.

Here are the step by step instructions to add an image in Flutter:

Step 1: At the root of your project, create a new folder called assets.

Step 2: Inside the root folder, create another folder called images. You can give any name to this folder.

Step 3: Add your images inside the assets/images folder.

Image in flutter

Step 4: Provide the image path in pubspec.yaml file as below.

IMP Note: For all the images that you use in the app, a path must be provided here. To provide the path of multiple images at once, add all your images inside the assets/images folder and give it a path in the pubspec.yaml file as below. And be careful about tabs and spacing, you may get an error.

Image in flutter

Step 5: Display image using the Image.asset() widget.

Output:

Image in flutter

Adding/Showing Image from the Internet

To add or show images from the internet:

Step1: Add the Image.network() to your page.

Step2: Inside the Image.network(), write the URL for the online image.

Step3: Restart your app.

Code Example:

Output:-

Conclusion

In this tutorial, we learned how to add image in Flutter app with practical examples. We also explored how to add/show an image from the internet. And in this way, you can insert images in your app from the asset folder.

Leave a Reply

18 − 8 =