Your Second Flutter App

Heads up... You've reached locked video content where the transcript will be shown as obfuscated text.

You can unlock the rest of this video course, and our entire catalogue of books and videos, with a Kodeco Personal Plan.

Unlock now

At this point, you have a course details page with just a course title on it. As you can see, it needs a little work. You're going to show the course image at the top of the course details screen. Now, in order to make the code a little cleaner, you're going to encapsulate the image you want to show into an image widget aptly called Image Container. The Image Container will extract showing the image and grabbing the course image from the network, using a network image. This container is composed of a few other widgets, which goes to show you how cool flutter is. We're creating new functionality by using existing widget combinations. In such perspective, you can think of widgets like Lego bricks that snap together in an infinite amount of ways. To get started, open your project in progress or download the starter project for this episode. In the UI course detail folder, create a file called imagecontainer.dart. Create a new StatelessWidget called Image Container. Make sure to import the material library by selecting the StatelessWidget and press Command + . on macOS or Control + . on Windows, then choose the import option. The class needs four properties. A width, a height, a color for showing a placeholder background, and the URL image to load which will pass in as the course artwork URL. Next, replace the existing constructor with a constructor that initializes all of the fields. Now, we need to update the build method for the widget. That will use a BoxDecoration, a DecorationImage, and a NetworkImage inside of a container widget. First, we'll set the width and height of the container. Next, we'll add a BoxDecoration. A BoxDecoration is a way for you to draw a box. It uses the placeholder color as a background, which will show while the image is downloading. The box is drawn in layers and the color is the bottom most layer. The image of a box shows on top of the color and has an alignment controlled by the DecorationImage. You can now use the DecorationImage to control how the image fits inside the box. In here, you use the default settings. You do some error checking on the URL to make sure it's valid. And if so, you use a NetworkImage to grab the image from the URL. Otherwise, the background color is shown by setting the image on the box to null. Okay, with your Image Container class in place. Next up, you'll utilize the new class to complete the course details screen.