by @kodeazy
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 insidepubspec.yaml
. -
Adding the
image
path insideImage()
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 imageflutter_image_add_example
folder is the root folder of the application here we addedimages
folder and added the imagedebug-remove.png
.
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')),
),
));
}