Summary - Todo app
- Flutter course
- Beginner
- Lesson 75/99
- 4 min
Combine all parts and finish a working todo app.
Combine all parts
A working todo app combines three main parts: the Todo model (task data), ListView.builder (showing tasks), and setState (rebuilding to add, complete, or delete). Navigator.push is used to add and Dismissible to delete.
ListView.builder(
itemCount: list.length,
itemBuilder: (context, index) {
final todo = list[index];
return ListTile(title: Text(todo.title));
},
)Practice Show the first task
Write a function show that takes a List<Todo> parameter and prints the title of the first element. In main, create a list containing a Todo with the title 'Ilk gorev' and call show.
Starter code
import 'package:flutter/material.dart';
class Todo {
String title;
bool done;
Todo({required this.title, this.done = false});
}
// goster fonksiyonu yaz: List<Todo> alsin
// ilk elemanin title'ini print ile yazdirsin
void main() {
// 'Ilk gorev' baslikli bir Todo iceren liste olustur
// goster'i cagir
}Sample solution
import 'package:flutter/material.dart';
class Todo {
String title;
bool done;
Todo({required this.title, this.done = false});
}
void goster(List<Todo> list) {
print(list[0].title);
}
void main() {
final list = [Todo(title: 'Ilk gorev')];
goster(list);
}Expected output
Ilk gorev
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Which parts does a working todo app combine?
- Material + InkWell + ripple
- Column + Row + SizedBox
- Text + Padding + Center
- Todo + ListView + setState Correct answer
Explanation: A working todo app combines the Todo model, displaying with ListView, and rebuilding with setState; Text, Padding, InkWell or Column are not for this purpose.
2 Add the removeAt method
setState(() {
list.____(index);
});setState(() {
list.removeAt(index);
});Explanation: To remove the element at a specific index from a list, the removeAt method is used; delete, removeItem or erase are not valid List methods.
3 Todo summary
| Term | Meaning |
|---|---|
Todo |
Task data |
ListView.builder |
Shows tasks |
Dismissible |
Deletes by swipe |
setState |
Rebuilds on change |