How To Display Image in Flutter

In this tutorial, we will see How To Display Image in Flutter. We use the Image widget to display the image, and the supported formats are JPEG, PNG, GIF, Animated GIF, WebP, Animated WebP, BMP, and WBMP. We mainly use a particular Image.asset constructor to display the image.

Image.asset Constructor

Creates a widget that displays an ImageStream obtained from the asset bundle. The key to the image is given by the name argument. The package argument must be non-null when displaying an image from the package and null otherwise.

How To Display Image in Flutter

The first step is, we need to create a new folder inside the flutter project root called assets. You can name that folder anything you want but for this demo, let us stick it with assets. Then, inside that folder, add one image manually. In my case, it is Krunal.jpg. Remember, we are displaying the static image in the Flutter application.

Now, update the pubspec.yaml file.

Inside the yaml file, you can remove the comment on this part.

assets:
    - assets/Krunal.jpg

So, we are telling flutter explicitly that we are using the static image in the flutter application.

Now, the last step is to replace the following code inside the lib >> main.dart file.

// main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('First app')),
        body: Column(
            children: <Widget>[
              Image.asset(
                'assets/Krunal.jpg',
              ),
              Text('Me')
            ],
          ),
      ),
    );
  }
}

So, here what we have done is that we have taken mainly six widgets. First is our scaffold means the home screen, and then inside that, we have taken an appbar and body widget with two children. One is Image, and one is Text.

Image.asset has given one argument named to that image, and Text widget has the string in its argument, and that is it. So save the file and go to the terminal and start the app.

flutter run -d all

You will see something like this. But, of course, your image will be different than mine.

 

So, our How To Display Image in Flutter Tutorial is over.