Challenge 2
- Flutter course
- Beginner
- Lesson 97/99
- 3 min
Build a contacts screen with ListView and ListTile.
Person list screen
To make a person list screen, you use ListView.builder and ListTile. ListView.builder takes itemCount and itemBuilder parameters; itemBuilder builds each row. By giving a Text widget to the title parameter of ListTile, you show the person's name.
ListView.builder(
itemCount: people.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(people[index]),
);
},
)Practice Make a person list screen
Write a function listeGoster that prints Liste hazir. Write a StatelessWidget named ListeEkrani; in its build method, define a List<String> named kisiler and show each person as a ListTile with ListView.builder. In main call listeGoster and start with runApp.
Starter code
import 'package:flutter/material.dart';
// listeGoster fonksiyonu yaz
// ListeEkrani adinda StatelessWidget yaz
// kisiler adinda bir liste tanimla ve ListView.builder ile goster
void main() {
}Sample solution
import 'package:flutter/material.dart';
void listeGoster() {
print('Liste hazir');
}
class ListeEkrani extends StatelessWidget {
const ListeEkrani({super.key});
@override
Widget build(BuildContext context) {
final kisiler = ['Ali', 'Veli', 'Ayse'];
return MaterialApp(
home: Scaffold(
body: ListView.builder(
itemCount: kisiler.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(kisiler[index]),
);
},
),
),
);
}
}
void main() {
listeGoster();
runApp(const ListeEkrani());
}Expected output
Liste hazir
Practice Make a list with a Person model
Write a function listeyiYazdir that prints Kisi listesi. Write a class named Kisi with an ad (String) field and a constructor. Write a StatelessWidget named KisiListesi; in its build method, define a list of Kisi objects and show each person's ad value as a ListTile with ListView.builder. In main call listeyiYazdir and start with runApp.
Starter code
import 'package:flutter/material.dart';
// Kisi adinda bir sinif yaz
// KisiListesi adinda StatelessWidget yaz
// Kisi nesnelerinden liste yap ve ListView.builder ile goster
void main() {
}Sample solution
import 'package:flutter/material.dart';
class Kisi {
String ad;
Kisi({required this.ad});
}
void listeyiYazdir() {
print('Kisi listesi');
}
class KisiListesi extends StatelessWidget {
const KisiListesi({super.key});
@override
Widget build(BuildContext context) {
final kisiler = [Kisi(ad: 'Ali'), Kisi(ad: 'Veli')];
return MaterialApp(
home: Scaffold(
body: ListView.builder(
itemCount: kisiler.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(kisiler[index].ad),
);
},
),
),
);
}
}
void main() {
listeyiYazdir();
runApp(const KisiListesi());
}Expected output
Kisi listesi
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What is ListView.builder's itemCount parameter used for?
- Sets the list color
- Changes the list font
- Sets the list height
- Specifies the number of items in the list Correct answer
Explanation: The itemCount parameter specifies the number of items in the list; it is not related to color, height or font.
2 Add ListTile inside itemBuilder
itemBuilder: (context, index) {
return ____(
title: Text(kisiler[index]),
);
},itemBuilder: (context, index) {
return ListTile(
title: Text(kisiler[index]),
);
},Explanation: ListTile is used as a list row; Container, SizedBox and Padding are not list row widgets.
3 List parts
| Term | Meaning |
|---|---|
ListView.builder |
Widget that builds the list |
ListTile |
Row widget |
itemCount |
Item count |
itemBuilder |
Callback that builds each row |