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

Episode complete

Play next episode

Next
About this episode
Leave a rating/review
See forum comments
Cinema mode Mark complete Download course materials
Previous episode: 12. Use a Listview Next episode: 14. Challenge: Show More Data

Get immediate access to this and 4,000+ other videos and books.

Take your career further with a Kodeco Personal Plan. With unlimited access to over 40+ books and 4,000+ professional videos in a single subscription, it's simply the best investment you can make in your development career.

Learn more Already a subscriber? Sign in.

Heads up... You’re accessing parts of this content for free, with some sections shown as obfuscated text.

Heads up... You’re accessing parts of this content for free, with some sections shown as obfuscated text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

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),