by @kodeazy

flutter Where to add images to display them in our application?

Home » flutter » flutter Where to add images to display them in our application?

In this blog we will discuss on where to add images to display the images inside the flutter application?

To display the images on flutter application follow the below steps.

  • Creating the images folder and addding the images.
  • Adding the path of images inside pubspec.yaml.
  • Adding the image path inside Image() widget for displaying the image.

    Creating the asset folder and addding the images.

    we create the images folder at the root of the application and add the images

    In the below image flutter_image_add_example folder is the root folder of the application here we added images folder and added the image debug-remove.png.
    Debug error Image

Adding the path of images inside pubspec.yaml file.

Open pubspec.yaml file and add assets subsection below flutter: as below example.

flutter:
  uses-material-design: true
  assets:
    - images/sample-image.jpeg

Adding the image path inside Image() widget for displaying the image.

Open the main.dart file and add the below code.

import 'package:flutter/material.dart';
void main() {
  runApp(
      MaterialApp(
        debugShowCheckedModeBanner: false,
        home: Scaffold(
          appBar: AppBar(title: Text("Flutter Add Image Example"),backgroundColor: Colors.black87,),
          backgroundColor : Colors.amber,
          body: Image(image: AssetImage('images/debug-remove.png')),
        ),
      ));
}

Now try running the example code
Output: Debug error Image