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
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
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
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.
Step 5: Display image using the Image.asset() widget.
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.
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.