Your Second Flutter App

So far, you’re showing the course title inside a Text widget in the ListView 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. 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 explicitly you doing everything from your end.

You’ll now update the buildRow method we added in the last episode to show the info we want for each course inside of a ListTile widget.

Now wait. You may be wondering what’s a ListTile? A list tile is a type of card that goes across the entire width of a device. It allows you to contain lines of text in the middle with widgets on both sides of them. ListTiles 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 courses_page.dart. Right now, the build row method is just returning the Text widget. Remove the text and replace it with a ListTile.

return ListTile();

First, give it a title. This is going to be the name of the course. Set it to have a font size of 18.

return ListTile(
  title: Text(course.name, style: const TextStyle(fontSize: 18.0)),
)

Next, you want to provide a trailing image of for the course. In the trailing property, add a ClipRRect widget, setting a border radius of eight.

trailing: ClipRRect(
  borderRadius: BorderRadius.circular(8.0),
),

ClipRRect widget here will enable us to clip the image corners in rounded form with 8 as the borderRadius. Next add a child property to the ClipRRect. Now provide the image which we’ll get from the network using the artworkUrl.

child: Image.network(course.artworkUrl,),

Build and run or hot reload. We get our course names and some images but everything is just squished together. We need to add some padding. First lets add some bottom padding to the course name.

Select the text, right click and choose refactor. Choose the wrap with padding option. Set the EdgeInsets to bottom padding.

title: Padding(
  padding: const EdgeInsets.only(bottom: 16.0),
  child: Text(course.name, style: const TextStyle(fontSize: 18.0)),
),

Next lets add some padding to the ListTile itself. Select the ListTile, right click and select refactor and then wrap with padding. Set the insets to 16.

return Padding(
  padding: const EdgeInsets.all(8.0),

And that’s it! Hot reload the app and you’ll see the list looks much better now.