Adding images

  1. Code along
  2. Images in Flutter
  3. Assets
  4. Adding images as assets to a Flutter project
  5. Displaying the images with a Widget
    1. Displaying Internet images
    2. Asset images vs. Network images

Code along

This video assumes you have completed Parts 1-2 from the Composition and Stateless Widgets lab.

Images in Flutter

Flutter offers many pre-built icons that you can use, but you will certainly want to use your own images in apps that you build. Images include photographs, artwork, and vector graphics.

There are two ways to add images to your project.

The first way is to add the images as files in your project. The image files become a part of the packge that is installed on the phone and live on the app store. This approach is appropriate for artwork, logos, and other static images that do not change while using the app. The only way to change these image files is to create a new version of your app.

The second way to add images is to load them over a network connection, which is what most apps do. This approach is necessary for dynamic images that change over time, like an Instagram feed. We will cover loading dynamic images over a network connection later in the course.

Assets

Flutter has a notion of assets – files that are included in the project but are not source code. Images are one kind of asset file. Other asset types can be audio files, videos, or documents. Assets are static files that are not compiled, but can be loaded and used by Flutter code.

Adding images as assets to a Flutter project

To add images to your Flutter project, you must add the files and tell Flutter where to find them. This is typically done as follows.

  1. At the root of your project, create an assets directory.
  2. Create a new images directory in the assets directory.
  3. Open pubspec.yaml in the root directory of your project.
  4. Partway down pubspec.yaml you will see the following 
     # The following section is specific to Flutter packages.
 flutter:

   # The following line ensures that the Material Icons font is
   # included with your application, so that you can use the icons in
   # the material Icons class.
   uses-material-design: true

   # To add assets to your application, add an assets section, like this:
   # assets:
   #   - images/a_dot_burr.jpeg
   #   - images/a_dot_ham.jpeg
  5. Change the above code to: 
     # The following section is specific to Flutter packages.
 flutter:

   # The following line ensures that the Material Icons font is
   # included with your application, so that you can use the icons in
   # the material Icons class.
   uses-material-design: true

   # To add assets to your application, add an assets section, like this:
   assets:
     - assets/images/

    The tabbing/spacing is very important here!flutter should be all the way left. assets should be two spaces in and - assets/images/ line should be four spaces in. This tells Flutter to load any files as assets that it finds in the assets/images/ directory you created. You can specify individual files, but this will load all files in a directory.

  6. Finally, place any images you want in your project in that new assets/images/ directory. You can do this with your regular file browser (Windows Explorer or Finder), or Visual Studio Code supports dragging files from your file browser to the directory in the Explorer pane.

Flutter supports images in multiple formats: JPEG, WebP, GIF, animated WebP/GIF, PNG, BMP, and WBMP. It uses the file extension to figure out the format.

Displaying the images with a Widget

We use the Image widget to display images on the screen.

Image.asset("assets/images/map.jpeg")

This snippet will load the image file map.jpeg from the assets/images/ directory and attempt to draw it on the screen. You must have configured the assets as described in the previous section for this to work.

Your images may be bigger than you anticipated. You can set the maximum image size by specifying additional constructor parameters, e.g.:

Image.asset("assets/images/map.jpeg", width: 256, height: 128) will display your image at most 256 pixels wide and at most 128 pixels high. Height and width are constraints. By default, Flutter will scale down the image to fit the constraints while preserving the image’s aspect ratio. Flutter will enforce both the height and the width constraint, but one side may be smaller than its constraint after scaling.

Displaying Internet images

You can also display images downloaded from the Internet using Image.network(...). For example:

Image.network("https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png")

This will display the Google logo. This approach will be useful later when we want to display an image based on a user selection, such as clicking on a “Friend” and seeing their profile picture.

Asset images vs. Network images

Ask the question, “Is this image going to change?” If the answer is “no”, then use an asset image. If the answer is “possibly”, you want to use a network image.

Asset images can only be updated when you distribute a new version of your app. So things like your app’s logo, background images, and custom icons all makes sense as assets.

Images that will change, such as a photo gallery, profile picture, or pictures of items for sale, should be network images. Bear in mind, of course, that networks can fail or the user may be in airplane mode. Images loading over the network may take time as well, and you may want to show a progress indicator. We will cover these issues in future labs.