ListTile
- Flutter course
- Beginner
- Lesson 48/99
- 4 min
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),
)Practice Print ListTile info
In main, print two lines with print: listtile satir and title ana metin.
Starter code
void main() {
// iki satır yazdır:
// listtile satir
// title ana metin
}Sample solution
void main() {
print('listtile satir');
print('title ana metin');
}Expected output
listtile satir title ana metin
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What does the title parameter set in ListTile?
- The left-leading icon
- The secondary text
- The right-trailing widget
- The main text Correct answer
Explanation: ListTile's title parameter sets the row's main text; subtitle gives the secondary text.
2 Set the subtitle
ListTile(
title: Text('Başlık'),
____: Text('Alt metin'),
)ListTile(
title: Text('Başlık'),
subtitle: Text('Alt metin'),
)Explanation: The subtitle parameter sets the secondary text in ListTile.
3 ListTile concepts
| Term | Meaning |
|---|---|
ListTile |
List row pattern |
title |
Main text |
subtitle |
Secondary text |
leading |
Left-leading widget |