ListTile

Learn to build a title + subtitle row with ListTile.

ListTile

ListTile is a common pattern for a list row. title sets the main text, subtitle the secondary text, leading the left-leading icon/avatar, and trailing the right-trailing widget. ListTile offers a Material Design compliant row height and spacing.

ListTile(
  leading: Icon(Icons.person),
  title: Text('Ada Yılmaz'),
  subtitle: Text('Flutter geliştirici'),
  trailing: Icon(Icons.arrow_forward),
)

leading and trailing

leading puts an icon or avatar at the left of a ListTile; usually an Icon or CircleAvatar is given. trailing places a widget at the right; typically an arrow icon, a toggle or a menu icon. While title and subtitle take a Text widget, leading and trailing can take any widget.

ListTile(
  leading: CircleAvatar(child: Text('A')),
  title: Text('Ada Yılmaz'),
  subtitle: Text('Son görülme: 2 dk önce'),
  trailing: Icon(Icons.more_vert),
)

Exercise Print ListTile info

In main, print two lines with print: listtile satir and title ana metin.

Show example solution

void main() {
  print('listtile satir');
  print('title ana metin');
}

Test yourself

What does the title parameter set in ListTile?
- The left-leading icon
- The secondary text
- The right-trailing widget
- The main text
Show answer

The main text — ListTile's title parameter sets the row's main text; subtitle gives the secondary text.

Set the subtitle

ListTile(
  title: Text('Başlık'),
  ____: Text('Alt metin'),
)

Show answer

ListTile(
  title: Text('Başlık'),
  subtitle: Text('Alt metin'),
)

ListTile concepts

ListTile

List row pattern
title

Main text
subtitle

Secondary text
leading

Left-leading widget

Next lesson: Separator

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies