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.
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.
Output:
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.