How to add Image from Assets in Flutter

In this Flutter image example, I will show you how to show images from assets, that is images which are locally defined inside the project folder.

First of all, create a folder named images inside your Flutter project directory. Now, add an image inside images folder. After that, open pubspec.yaml file from your project folder and find the line showing

# To add assets to your application, add an assets section, like this:
# assets:
# – images/a_dot_burr.jpeg

Uncomment the last two lines by removing # symbol and replace a_dot_burr.jpeg with your image file name. Now it looks like as following:

assets:
– images/girl.png

Make sure that the spacing before the code starts is correct otherwise it will cause an error.

You have added image and now in coding, you have to use Image.asset constructor. Go through the flutter example of adding images from assets.

import 'package:flutter/material.dart';


void main() => runApp(MyApp());


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Gradient Button Example'),
        ),
        body: Center(
      child: Body()
    ),
      ),
    );
  }
}

/// This is the stateless widget that the main application instantiates.
class Body extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child:
       Image.asset('images/girl.png')
        );
  }
}

The output of the flutter example is as given in the screenshot.