Open In App
Related Articles

Flutter – Asset Image

Improve Article
Save Article
Like Article

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. 

Here 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.


Image.asset('image name')

Steps to Add an Image:

Step 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

Step 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.

Step 3. Register the assets folder in pubspec.yaml file and update it. 

a) To add images, write the following code:

        - assets/images/yourFirstImage.jpg
        - assets/image/yourSecondImage.jpg

b) If you want to include all the images of the assets folder then add this:

         - assets/images/

image in flutter app

Note: Take care of the indentation, assets should be properly indented to avoid any error.

Step 4. Insert the image code in the file, where you want to add the image.




import 'package:flutter/material.dart';
// function to start app building
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
// This widget is the root
// of your application
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text(
            'Insert Image Demo',
        body: Center(
          child: Column(
            children: <Widget>[
                  height: 200,
                  scale: 2.5,
                  // color: Color.fromARGB(255, 15, 147, 59),
                      const AlwaysStoppedAnimation<double>(0.5)), //Image.asset
                height: 400,
                width: 400,
              ), // Image.asset
            ], //<Widget>[]
          ), //Column
        ), //Center

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



Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 03 Jun, 2022
Like Article
Save Article
Similar Reads