Flutter Add Image

Flutter is an open source framework by Google for building beautiful, natively compiled, multi-platform applications from a single code base. Flutter allows you to build apps for mobile, web, dekstop, and embedded devices – all from a single codebase.

Referring to the official documentation we can easily add image in a flutter app using the following syntax. 


Steps – Flutter Add Image

  1. Create a new folder in the root of your flutter proejct. We’ll create assets folder and then will create images folder. In this way, we can later create other folders like fonts in our assets folder.
Flutter Create Assets/Images Folder
  1.  Copy your desired image in the newly created images folder.
  2. pubspec.yaml is an important file located at the root of the project which is  used to identify the assets used in an app. We have to manipulate this file to use images in a flutter app.
  # To add assets to your application, add an assets section, like this:
     - assets/images/flutter.png

Note: Please take care of indentation.

  • [2 white spaces before assets:]
  • [4 white spaces before – assets/images/flutter.png]

Also, If you want to use more than one image then don’t write image name after folder name.

  1. Insert flutter add image code in your app.


import 'package:flutter/material.dart';

void main() => runApp(
        home: Scaffold(
          appBar: AppBar(title: const Text("Flutter Add Image")),
          body: Center(
            child: Image.asset("assets/images/flutter.png"),


Output Flutter Add Image

Add Image from Internet

To add image from the internet or network we need to use Image.network instead of Image.asset and pass the image URL in the parameter. (Official Documentation)


Happy coding!



no responses for Flutter Add Image

    Leave a Reply

    Your email address will not be published. Required fields are marked *