List and add
- Flutter course
- Intermediate
- Lesson 82/99
- 4 min
Write a list and FloatingActionButton add flow.
Note list with ListView
To list the notes on screen you use ListView.builder. The itemCount is the number of notes, and the itemBuilder produces the widget for each row. You typically show a ListTile for each note.
ListView.builder(
itemCount: notlar.length,
itemBuilder: (context, index) {
final n = notlar[index];
return ListTile(title: Text(n.baslik));
},
)Adding with FloatingActionButton
You use a FloatingActionButton to start the new note flow. Inside onPressed you go to the add screen with Navigator.push; when that screen returns you add the new note to the list.
FloatingActionButton(
onPressed: () async {
final yeniNot = await Navigator.push(
context,
MaterialPageRoute(builder: (_) => EklemeEkrani()),
);
if (yeniNot != null) {
// add to list
}
},
child: const Icon(Icons.add),
)Practice List notes with ListView
Define a StatelessWidget named NotlarEkrani with a required final List<Note> notlar field. Its build method should return a Scaffold whose body is a ListView.builder with itemCount set to notlar.length and itemBuilder returning ListTile(title: Text(n.baslik)) for each row. Print 'hazir' in main.
Starter code
import 'package:flutter/material.dart';
class Note {
final String id;
final String baslik;
final String icerik;
Note(this.id, this.baslik, this.icerik);
}
// NotlarEkrani StatelessWidget tanımla
// final List<Note> notlar (required)
// build Scaffold döndürsün
// gövde ListView.builder olsun
// itemCount notlar.length, itemBuilder ListTile döndürsün
void main() {
// 'hazir' yazdır
}Sample solution
import 'package:flutter/material.dart';
class Note {
final String id;
final String baslik;
final String icerik;
Note(this.id, this.baslik, this.icerik);
}
class NotlarEkrani extends StatelessWidget {
final List<Note> notlar;
const NotlarEkrani({super.key, required this.notlar});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Notlar')),
body: ListView.builder(
itemCount: notlar.length,
itemBuilder: (context, index) {
final n = notlar[index];
return ListTile(title: Text(n.baslik));
},
),
);
}
}
void main() {
print('hazir');
}Expected output
hazir
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What does the itemCount parameter of ListView.builder specify?
- The font size of each row
- The animation duration
- The number of notes Correct answer
- The height of the list
Explanation: itemCount specifies how many rows the list will display. Height, font size, and animation duration are unrelated to itemCount.
2 The Navigator.push call
final sonuc = await Navigator.____(
context,
MaterialPageRoute(builder: (_) => EklemeEkrani()),
);final sonuc = await Navigator.push(
context,
MaterialPageRoute(builder: (_) => EklemeEkrani()),
);Explanation: To open a new screen you use Navigator.push. pop is for going back, and go and replace are GoRouter's methods; here Navigator is being used.
3 List and add parts
| Term | Meaning |
|---|---|
ListView.builder |
Note list |
itemCount |
Row count |
FloatingActionButton |
Add button |
Navigator.push |
Opening a new screen |