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

So far, you're showing the course title inside a text widget in the List View items. But we want to show more information for each course, including the course artwork, which is an image we need to download from the internet. Now we could download an image and then update a widget when we are done, but thankfully, the flutter image class will let you do that easily without you having to do everything from scratch. You'll now update the build row method we added in the last episode to show the info we want for each course inside of a List Tile widget. Now, wait, you may be wondering what's a List Tile? A List Tile is a type of card that goes across the entire width of the device. It allows you to contain lines of texts in the middle with widgets on both sides of them. List Tiles makes it quite easy to create nice looking designs in your List view. To get started, open your project in progress or download the starter project for this episode. In the courses folder, open up CoursesPage.dart. Right now, the build row method is just returning a text widget. Remove the text and replace it with a List Tile. Now give it a title. This is going to be the name of the course. Set it to have a font size of 18. Now you want to provide a trailing image for the course. In the Trailing Property, add a ClipRRect widget, setting the border radius of eight. Next, add a child property to the ClipRRect. Now we'll provide the image which we'll get from the network using the artwork URL. Build and run or hot reload. We get our course names and some images, but everything is just too squished together. We need to add some padding. First, let's add some bottom padding to the course name. Select the text, right click and choose Refactor. Choose the Wrap with Padding option. Set the edge insets to Bottom Padding. Next, let's add some padding to the List Tile itself. Select the List Tile, right click and select Refactor. Then, choose Wrap with Padding. Set the insets to eight. And that's all there is. Hot reload the app. You'll see the list looks much better now.