Summary - ListView
- Flutter course
- Beginner
- Lesson 50/99
- 4 min
Combine ListView, builder and ListTile to make a contacts list.
ListView summary
ListView provides a scrollable list; ListView.builder efficiently produces large lists, and ListView.separated inserts separators between items. ListTile is the common list row pattern with title + subtitle + leading + trailing. Combining these tools, you can build a person list, settings menu or message list.
final kisiler = ['Ada', 'Bora', 'Cem', 'Deniz'];
ListView.builder(
itemCount: kisiler.length,
itemBuilder: (context, index) {
return ListTile(
leading: CircleAvatar(child: Text(kisiler[index][0])),
title: Text(kisiler[index]),
subtitle: Text('Kişi $index'),
trailing: Icon(Icons.arrow_forward),
);
},
)Practice Build a person list and run
First print print('liste hazir'), then call runApp(MaterialApp(home: ListView.builder(...))). ListView.builder should have itemCount: 3 and an itemBuilder returning ListTile(title: Text('Kişi $index'), leading: Icon(Icons.person)).
Starter code
import 'package:flutter/material.dart';
void main() {
// 'liste hazir' mesajını print ile yazdır
// runApp ile MaterialApp çağır; home bir liste olsun
}
// Liste: öğe sayısı ve öğe üretici içersin
// öğe üretici: ListTile döndürsün, title ve leading ileSample solution
import 'package:flutter/material.dart';
void main() {
print('liste hazir');
runApp(MaterialApp(home: ListView.builder(
itemCount: 3,
itemBuilder: (context, index) {
return ListTile(
title: Text('Kişi $index'),
leading: Icon(Icons.person),
);
},
)));
}Expected output
liste hazir
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Which widget is used to show avatar + name + info per row in a person list?
- SizedBox
- Padding
- Container
- ListTile Correct answer
Explanation: A person list shows avatar + name + info per row; this pattern is built with ListTile.
2 List item title
ListTile(
____: Text('Kişi adı'),
subtitle: Text('Alt bilgi'),
)ListTile(
title: Text('Kişi adı'),
subtitle: Text('Alt bilgi'),
)Explanation: The title parameter sets ListTile's main text.
3 ListView combined
| Term | Meaning |
|---|---|
Kaydırılabilir liste |
With ListView |
Verimli üretim |
With ListView.builder |
Liste satırı |
With ListTile |
Ayraçlı liste |
With ListView.separated |