Adding images

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

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.

Code along

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

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 
     flutter:
     # To add assets to your application, add an assets section, like this:
     # assets:
     #   - images/a_dot_ham.jpeg
  5. Change the above code to: 
     flutter:
     # To add assets to your application, add an assets section, like this:
     assets:
         - assets/images/
     #   - images/a_dot_ham.jpeg

    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 VSCode 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/burger.jpeg")

This snippet will load the image file burger.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/burger.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.