Your Second Flutter App

Nov 30 2021 Dart 2.13, Flutter 2.2.3, Visual Studio Code

Part 2: Show a List

13. Use a List Tile

Lesson Complete

Play Next Lesson
Next
Save for later
About this episode
See versions
See forum comments
Cinema mode Mark as Complete Download course materials
Previous episode: 12. Use a Listview Next episode: 14. Challenge: Show More Data

This video was last updated on Nov 30 2021

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.com Professional subscription.

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.

return ListTile();
return ListTile(
  title: Text(course.name, style: const TextStyle(fontSize: 18.0)),
)
trailing: ClipRRect(
  borderRadius: BorderRadius.circular(8.0),
),
child: Image.network(course.artworkUrl,),
title: Padding(
  padding: const EdgeInsets.only(bottom: 16.0),
  child: Text(course.name, style: const TextStyle(fontSize: 18.0)),
),
return Padding(
  padding: const EdgeInsets.all(8.0),