A complete guide to Flutter’s ListTile

A ListTile is generally what you use to populate a ListView in Flutter. In this post I will cover all of the parameters with visual examples to make it clear. Scroll down to the end to see the code in context.

title

The title can take any widget, but it is generally going to be a Text widget.

ListTile(
  title: Text('Horse'),
)

ListTile with only the title set

subtitle

The subtitle is smaller text below the title.

ListTile(
  title: Text('Horse'),
  subtitle: Text('A strong animal'),
)

ListTile with title and subtitle

dense

The dense parameter makes the text smaller and packs everything together.

ListTile(
  title: Text('Horse'),
  subtitle: Text('A strong animal'),
  dense: true,
)

dense set to false (left) and true (right)

leading

You can add an image or an icon to the start of the ListTile. This is usually a CircleAvatar or an Icon.

ListTile(
  leading: CircleAvatar(
    backgroundImage: NetworkImage(imageUrl),
  ),
  title: Text('Horse'),
)

leading with CircleAvatar

ListTile(
  leading: Icon(Icons.home),
  title: Text('House'),
)

leading with icon

trailing

Setting the trailing places an image at the end of the ListTile. This is particularly useful for indicating a master-detail layout.

ListTile(
  title: Text('Horse'),
  trailing: Icon(Icons.keyboard_arrow_right),
)