Flutter
Project skeleton
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),
),
);
}
}
Exercise 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.
Show example 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);
}
Test yourself
-
Why are the fields in the Note model declared final?
- To ensure immutability after the object is created
- To establish a database connection
- To specify the animation duration
- To speed up UI rendering
Show answer
To ensure immutability after the object is created — 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.
-
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};
}
Show answer
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};
}
-
Note model and skeleton
- class Note
- Model class
- final String id
- Immutable field
- toJson
- Conversion to Map
- Scaffold
- Screen skeleton
Next lesson: List and add
