How to Add Image In Flutter?

Hi Guys,

Today, I will learn you how to add image in flutter. We will show example of Image widget is used to display an image in flutter application.Image widget is used to display an image in the application.Image widget provides different constructors to load images from multiple sources and they are as follows.

->Image:- Generic image loader using ImageProvider

->Image.asset:- Load image from flutter project’s assets

->Image.file:- Load image from system folder

->Image.memory:- Load image from memory

->Image.Network:- Load image from network

Here, I will give you full example for simply display image using flutter as bellow.

Solution

The easiest option to load and display an image in Flutter is by including the image as assets of the application and load it into the widget on demand.

->Make a folder, assets in the project folder and place the necessary images.

flutter:
  assets:
    - assets/g_icon.png
    - assets/ns.png

Next, load and display the image in the application.

Image.asset('assets/ns.png')

Example

Here In this example,The complete source code of MyApp widget of the Add Image application and the result is as shown below .

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Nicesnippets',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Nicesnippets'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar( title: Text(this.title), ),
      body: Center( child: Image.asset("assets/ns.png")),
    );
  }
}

It will help you...

Output