Flutter is an open-source, cross-platform UI development kit developed by Google. It is gaining popularity these days, as the app made in flutter can run on various devices regardless of their platform. It is majorly used to develop applications for Android and iOS, as a single app made in flutter can work efficiently on both platforms.
In this article, we will learn how to add images in the flutter app. A flutter app when built has both assets (resources) and code. Assets are available and deployed during runtime. The asset is a file that can include static data, configuration files, icons, and images. The Flutter app supports many image formats, such as JPEG, WebP, PNG, GIF, animated WebP/GIF, BMP, and WBMP.
Steps to Add an Image:
1. Create a new folder
- It should be in the root of your flutter project. You can name it whatever you want, but assets are preferred.
- If you want to add other assets to your app, like fonts, it is preferred to make another subfolder named images.
2. Now you can copy your image to images sub-folder. The path should look like assets/images/yourImage. Before adding images also check the above-mentioned supported image formats.
3. Register the assets folder in pubspec.yaml file and update it.
a) To add images, write the following code:
flutter: assets: - assets/images/yourFirstImage.jpg - assets/image/yourSecondImage.jpg
b) If you want to include all the images of the assets folder then add this:
flutter: assets: - assets/images/
Note: Take care of the indentation, assets should be properly indented to avoid any error.
4. Insert the image code in the file, where you want to add the image.
5. Now you can save all the files and run the app, you will find the output as shown below.
- A Hello World App using Flutter
- How to Add Space Between Widgets in Flutter?
- How to add Rate the App feature in Android
- How to add Lottie Animation in an Android app
- MaterialApp class in Flutter
- Difference between React Native and Flutter
- Scaffold class in Flutter with Examples
- Difference Between Rows and Columns vs Container in Flutter
- Multi Page Applications in Flutter
- Routes and Navigator in Flutter
- Flutter GridView
- What is widgets in Flutter?
- Container class in Flutter
- Difference Between Stateless and Stateful Widget in Flutter
- Rive animations in Flutter
- ProgressIndicator in Flutter
- Row and Column Widgets in Flutter with Example
- Flutter - Stateful vs Stateless Widgets
- Wrap Widget in Flutter
- Listview.builder in Flutter
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.