Working with images in Flutter : Complete Flutter Tutorial

As I had said in the previous posts, everything is a widget in Flutter, so for working images, we are going to use an image widget. So for understanding the concept of images in detail, we will be making I am Rich app.

Now that you are familiar with the basics of Flutter development, we can proceed with a core Android concept of Flutter that is images. As I had said in the previous posts, everything is a widget in Flutter, so for working images, we are going to use an image widget.

To understand this concept better, let's make an app that consists of images. I checked out the play store and the easiest app I found was I am Rich app which does nothing and costs almost 999$. Some people even bought the app as an icon of being rich. All the app has is an image of a diamond. So for understanding the concept of images in detail, we will be making I am Rich app.

Working with images in Flutter

Open your Android studio, and start a new Flutter project. Enter all the details and click on Finish. Now you will get prebuilt code by Flutter team. Remove all the code except the first line and then start coding your app like we did in the previous post. 

Today we will go into more detail and first give the title to our app. Code your way till scaffold, by adding run app, MaterialApp, and Scaffold into the app. Now as I said, all the widgets like title bar come into scaffold so add an appBar and inside the AppBar add title text as I am Rich. 

Your code will look something like this:

[void main() {

  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('I am rich'),
        ),
      ),
    ),
  );

}]

You have successfully added a title to your app. Now we will add our first image into our app. Let us add the body to the scaffold. After the appBar is over, add a body and create a container to it. Now add a child center widget to container and inside the center widget, add one more child, an image widget. This image will be taken from the network so you can select any image to show in your app.

For image, add an image attribute with NetworkImage and add a URL inside the parenthesis. The URL you will enter should be the URL of the image. Here is an image of a diamond for you to use. Open this image in a new tab and you will get the link to this image.

Your code will look something like this:

[void main() {

  runApp(
  MaterialApp(
     home: Scaffold(
        appBar: AppBar(
          title: Text('I am rich'),
        ),
        body : Container(
          child : Center(
            child: Image(
              image: NetworkImage('https://4cs.gia.edu/wp-content/uploads/2017/05/NewHero_LooseDiamond_700x394.jpg'),
            ),
          )
        ),
     ),
  ),
  );

}]

Now compile the app and you will have an image inside your app. You have successfully added a network image to the app. One thing which you need to do is add a background color. The app looks dull in plain white. So to make our app look more classy, we will add the background color to both the title bar and background of the app.

At the end of the body, add backgroundColor attribute and select the color you want. Do the same after the title bar.

Here is how your code will look after that:

[void main() { runApp( MaterialApp( home: Scaffold( appBar: AppBar( title: Text('I am rich'), backgroundColor: Colors.orange[200], ), body : Container( child : Center( child: Image( image: NetworkImage('https://4cs.gia.edu/wp-content/uploads/2017/05/NewHero_LooseDiamond_700x394.jpg'), ), ) ), backgroundColor: Colors.orange[500], ), ), ); }]

Now the last thing remaining is adding an image asset in the app. Download the diamond image above and paste it into a separate folder named images into the root of your app. So your image address should look like this: /yourprojectfolder/images/yourimage.jpg

Now in your pubspec.yaml file go to code where assets are mentioned and uncomment it. Now click packages get. See to it that there are only two spaces after assets.

Now you have included the image into your app. Just specify the code where you want to show it. Now instead of NetworkImage add Assetimage and specify the image location which in this case is /images/youimage.jpg.

Here is the code for it:

[void main() {

  runApp(
  MaterialApp(
     home: Scaffold(
        appBar: AppBar(
          title: Text('I am rich'),
          backgroundColor: Colors.orange[200],
        ),
        body : Container(
          child : Center(
            child: Image(
              image : AssetImage('images/daimond.jpg'),
            ),
          )
        ),
       backgroundColor: Colors.orange[500],
     ),
  ),
  );

}]

Congratulations you have successfully made your first image app. Did you find this tutorial helpful? Comment below to let us know how you feel. Subscribe to our blog for more tutorials on Flutter.