🚀 A new course, Advanced Flutter, is now live!

Adding Images

    Summary

    In this lesson we'll cover: adding images using Image, working with image assets in Flutter and controlling image size and layout using BoxConstraints.

    The Code for This Lesson

    Check out the tourismandco repo's step/step03 branch for the code we'll cover in this lesson.

    Adding an Image

    • Based on our screenshot, let's add a banner image to our screen.
    • To keep the code for our Location Detail screen, let's create a new StatelessWidget that accepts a parameter of a file path to an asset.
    • Note that typically, images should be loaded from a URL, so we'll do that in a later video.

    Adding Image Assets to a Flutter Project

    • Create a new directory called assets/images.
    • Copy the asset .jpg file located at assets/images in the step/step03 branch of this repo and copy it to our new directory.
    • Finally, we need to update our Flutter configuration so it knows about the new directory:
    # pubspec.yaml
    
    flutter:
    
      # ...
    
      assets:
       - assets/images/
    
      # ...
    
    • Make sure you don't forget to include the trailing / at the end of the path.
    • Also be careful of the indentation or else Flutter won't be able to interpret this file. Each indentation should be 2 spaces. Checkout the yaml website for more information.

    Implementing our ImageBanner Widget

    • We can use the Image widget.
    • asset() is what's called a "named constructor".
    • The fit parameter allows us to control how the image is resized based on the parent Container. Many of the options work the same way as CSS so it may be familiar to you.
    // location_detail/image_banner.dart
    
    import 'package:flutter/material.dart';
    
    class ImageBanner extends StatelessWidget {
      final String _assetPath;
    
      ImageBanner(this._assetPath);
    
      @override
      Widget build(BuildContext context) {
        return Container(
            constraints: BoxConstraints.expand(height: 200.0),
            decoration: BoxDecoration(color: Colors.grey),
            child: Image.asset(
              _assetPath,
              fit: BoxFit.cover,
            ));
      }
    }
    
    • We can specify a height using BoxConstraints

    Using Our ImageBanner Widget

    // location_detail/location_detail.dart
    
    import 'package:flutter/material.dart';
    import 'image_banner.dart';
    import 'text_section.dart';
    
    class LocationDetail extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text('Location Detail'),
          ),
          body: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.end,
              children: [
                ImageBanner("assets/images/kiyomizu-dera.jpg"),
                TextSection(Colors.red),
                TextSection(Colors.green),
                TextSection(Colors.blue),
              ]),
        );
      }
    }
    

    Conclusion

    Working with images is pretty easy as you can see. Later we will use proper image URLs instead of actual files. Files aren't recommended as they can bloat the final app size.