Project skeleton
- Flutter course
- Intermediate
- Lesson 81/99
- 4 min
Build the note app skeleton and model.
The Note model class
To hold the data of the note app you define a Note model class. Its fields are final and store basic info such as id, baslik, and icerik. With fromJson and toJson methods you handle JSON conversion; this makes storing the note permanently easier later.
class Note {
final String id;
final String baslik;
final String icerik;
Note(this.id, this.baslik, this.icerik);
Map<String, dynamic> toJson() => {
'id': id,
'baslik': baslik,
'icerik': icerik,
};
}The Scaffold skeleton
The note app screen is built on a Scaffold. The AppBar shows a title, the body lists the notes, and a FloatingActionButton starts the new note flow. Even with an empty model, the skeleton is ready.
class NoteScreen extends StatelessWidget {
const NoteScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Notlar')),
body: const Center(child: Text('Henüz not yok')),
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: const Icon(Icons.add),
),
);
}
}Practice Define the Note model
Define a Note class with final String id, final String baslik, and final String icerik fields. Add a toJson method that returns a Map containing these three fields. In main, create a Note instance and print its baslik field.
Starter code
// Note sınıfını tanımla
// id, baslik ve icerik alanları final olsun
// toJson metodunu ekle
void main() {
// bir Note oluştur ve baslik'ını yazdır
}Sample solution
class Note {
final String id;
final String baslik;
final String icerik;
Note(this.id, this.baslik, this.icerik);
Map<String, dynamic> toJson() => {
'id': id,
'baslik': baslik,
'icerik': icerik,
};
}
void main() {
final n = Note('1', 'Alışveriş', 'Süt ve ekmek');
print(n.baslik);
}Expected output
Alışveriş
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Why are the fields in the Note model declared final?
- To ensure immutability after the object is created Correct answer
- To establish a database connection
- To specify the animation duration
- To speed up UI rendering
Explanation: final fields cannot be changed after the object is created; this keeps the data consistent. UI speed, database connection, and animation duration are unrelated to final.
2 The toJson method
class Note {
final String id;
final String baslik;
final String icerik;
Note(this.id, this.baslik, this.icerik);
Map<String, dynamic> ____() => {'id': id, 'baslik': baslik, 'icerik': icerik};
}class Note {
final String id;
final String baslik;
final String icerik;
Note(this.id, this.baslik, this.icerik);
Map<String, dynamic> toJson() => {'id': id, 'baslik': baslik, 'icerik': icerik};
}Explanation: The toJson method converts the model to a Map; this Map can later be serialized with jsonEncode. fromJson produces an object from a Map, encode is a function name but not a method name, and save is a generic name.
3 Note model and skeleton
| Term | Meaning |
|---|---|
class Note |
Model class |
final String id |
Immutable field |
toJson |
Conversion to Map |
Scaffold |
Screen skeleton |