Project skeleton
- Flutter course
- Beginner
- Lesson 71/99
- 4 min
Lay out the skeleton and data model of the todo app.
Todo model
In a todo app, each task is represented by a Todo object. This object typically contains a title and a done field; title holds the task text and done holds whether it is completed. The task list is kept as a List<Todo> and displayed with ListView.builder.
class Todo {
String title;
bool done;
Todo({required this.title, this.done = false});
}Showing with ListView.builder
To show the task list, you use ListView.builder. itemCount is the length of the list and itemBuilder builds each row. Each row usually contains a ListTile with a Text widget given to its title property.
ListView.builder(
itemCount: list.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(list[index].title),
);
},
)Practice Define the Todo model
Write a class named Todo with title (String) and done (bool, default false) fields and a constructor. In main, create a Todo with the title 'Alisveris' and print its title with print.
Starter code
import 'package:flutter/material.dart';
// Todo sinifi yaz: title ve done alanlari
// main icinde bir Todo olustur ve title'i yazdir
void main() {
// Todo olustur
}Sample solution
import 'package:flutter/material.dart';
class Todo {
String title;
bool done;
Todo({required this.title, this.done = false});
}
void main() {
final t = Todo(title: 'Alisveris');
print(t.title);
}Expected output
Alisveris
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Which fields are typically found in a Todo model?
- width and height
- x and y
- title and done Correct answer
- color and size
Explanation: In a Todo model, title holds the task text and done holds the completion state; color, size, width, height, x, y are not typical Todo fields.
2 Add a constructor to the Todo class
class Todo {
String title;
bool done;
____({required this.title, this.done = false});
}class Todo {
String title;
bool done;
Todo({required this.title, this.done = false});
}Explanation: The constructor of the Todo class must have the same name as the class: Todo. List, Map and String are different types and cannot be a constructor name.
3 Todo app parts
| Term | Meaning |
|---|---|
Todo |
Task model |
ListView.builder |
Widget that draws the list |
title |
Task title |
done |
Completion state |