Separator
- Flutter course
- Beginner
- Lesson 49/99
- 4 min
Learn to add dividers between rows with ListView.separated.
ListView.separated
ListView.separated is a kind of ListView that inserts a separator between list items. Alongside itemCount and itemBuilder, it takes a separatorBuilder; this produces the widget drawn between each pair of items. The most common separator is the Divider widget.
ListView.separated(
itemCount: 10,
separatorBuilder: (context, index) => Divider(),
itemBuilder: (context, index) {
return ListTile(title: Text('Öğe $index'));
},
)The Divider widget
Divider is a simple widget that draws a horizontal line. It is frequently used as the separatorBuilder in ListView.separated. The thickness parameter sets line thickness, color the color, and indent the left and right margin. An empty Container can also be used as a separator, but Divider is clearer.
ListView.separated(
itemCount: 5,
separatorBuilder: (context, index) => Divider(
color: Colors.grey,
thickness: 1,
indent: 16,
),
itemBuilder: (context, index) => ListTile(
title: Text('Kişi $index'),
),
)Practice Print separator info
In main, print two lines with print: separated ayrac and divider cizgi.
Starter code
void main() {
// iki satır yazdır:
// separated ayrac
// divider cizgi
}Sample solution
void main() {
print('separated ayrac');
print('divider cizgi');
}Expected output
separated ayrac divider cizgi
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What does ListView.separated add?
- A separator between items Correct answer
- A button below items
- An icon beside items
- A header above items
Explanation: ListView.separated inserts a separator widget between items via separatorBuilder.
2 Add a separator
ListView.
____(
itemCount: 5,
separatorBuilder: (context, index) => Divider(),
itemBuilder: (context, index) => Text('$index'),
)ListView.
separated(
itemCount: 5,
separatorBuilder: (context, index) => Divider(),
itemBuilder: (context, index) => Text('$index'),
)Explanation: separated is ListView's named constructor that produces a list with separators.
3 Separator concepts
| Term | Meaning |
|---|---|
ListView.separated |
List with separators |
separatorBuilder |
Function producing separators |
Divider |
Horizontal line widget |
indent |
Line edge spacing |