How to Add images in Flutter App?

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.
 

Syntax:

Image.asset('image name')

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.

 



image in flutter app

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/

 

image in flutter app

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.

Image.asset('assets/images/GeeksforGeeks.jpg')

Dart

filter_none

edit
close

play_arrow

link
brightness_4
code

import 'package:flutter/material.dart';  
    
void main() => runApp(MyApp());  
  
class MyApp extends StatelessWidget {  
  
  // This widget is the root 
  // of your application
   
  @override  
  Widget build(BuildContext context) {  
   
    return MaterialApp(  
        
      home: Scaffold(  
        appBar: AppBar(  
          title: Text('Insert Image Demo'),  
        ),  
           
        body: Center(  
          child: Column(              
            children: <Widget>[  
              Image.asset('assets/images/GeeksforGeeks.jpg'),  
            ],  
          ),  
        ),  
      ),  
    );  
  }  
}  

chevron_right


 

5. Now you can save all the files and run the app, you will find the output as shown below. 
 

Output :
 

Add image in a flutter app example

 




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.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.


Article Tags :

6


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.