AppDividend
Latest Code Tutorials

How To Display Image in Flutter

1

In this tutorial, we will see How To Display Image in Flutter. We use 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 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 it that folder anything you want but for this demo let us stick it with assets. 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 which has two children. One is Image, and one is Text.

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

flutter run -d all

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

 

How To Display Image in Flutter

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

1 Comment
  1. john treudu says

    Very helpful tutorial.

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.