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. 

Image.asset('image_name')

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.

2.  Copy your desired image in the newly created images folder.
3. 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:
     - 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.

4. Insert flutter add image code in your app.

Image.asset("assets/images/flutter.png"),

Code

import 'package:flutter/material.dart';

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

Output

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)

Image.network("https://picsum.photos/250?image=9"),

Happy coding!

Comments

comments