melby
📱 Penjelasan Code Aplikasi Todo List Flutter :
Artikel ini menjelaskan sebuah **aplikasi Todo List sederhana berbasis Flutter** dengan tampilan minimalis dan modern. Aplikasi ini memungkinkan pengguna untuk **menambah, menandai selesai, dan menghapus tugas**.
---
## 🚀 1. Fungsi `main()`
```dart
void main() {
runApp(const TodoApp());
}
```
Fungsi `main()` adalah titik awal aplikasi Flutter. Di sini kita menjalankan widget utama bernama **TodoApp** menggunakan `runApp()`.
---
## 🎨 2. Widget `TodoApp`
```dart
class TodoApp extends StatelessWidget { ... }
```
Widget ini berfungsi sebagai **root aplikasi**.
Beberapa hal penting:
* Menggunakan `MaterialApp`
* `debugShowCheckedModeBanner: false` untuk menghilangkan label debug
* Mengatur tema aplikasi seperti:
* Font: **Poppins**
* Background scaffold warna soft `#F6F7FB`
* Halaman utama diarahkan ke `TodoPage`
---
## 📝 3. Widget `TodoPage`
```dart
class TodoPage extends StatefulWidget { ... }
```
Widget ini menggunakan **StatefulWidget** karena data tugas akan berubah (ditambah, dicentang, dihapus).
### State `_TodoPageState`
Di dalam state ini terdapat:
```dart
final TextEditingController controller = TextEditingController();
final List<Map<String, dynamic>> tasks = [];
```
* `controller` → Mengambil input teks dari TextField
* `tasks` → Menyimpan daftar tugas dalam bentuk List berisi Map:
* `title` : nama tugas
* `done` : status selesai (true / false)
---
## ➕ 4. Fungsi `addTask()`
```dart
void addTask() {
if (controller.text.isNotEmpty) {
setState(() {
tasks.add({
'title': controller.text,
'done': false,
});
});
controller.clear();
Navigator.pop(context);
}
}
```
Fungsi ini digunakan untuk:
* Mengecek apakah input tidak kosong
* Menambahkan task baru ke dalam list
* Mengosongkan TextField
* Menutup BottomSheet setelah task ditambahkan
---
## 🧭 5. Tampilan `AppBar`
```dart
AppBar(
title: Column(
children: [
Text('My Todo List 📝'),
Text('melby'),
],
),
)
```
Menampilkan:
* Judul aplikasi
* Nama pengguna
* Tampilan transparan agar terlihat clean & aesthetic
---
## 📋 6. Body: Menampilkan Task
### 🔹 Jika task kosong
```dart
Text('No tasks yet 🌸')
```
Akan muncul pesan ketika belum ada tugas.
### 🔹 Jika task tersedia
Menggunakan `ListView.builder` untuk menampilkan daftar tugas secara dinamis.
Setiap item berisi:
* **Checkbox** → Menandai task selesai
* **Text** → Nama task (coret otomatis jika selesai)
* **Icon Delete** → Menghapus task
---
## 🎯 7. Floating Action Button
```dart
onPressed: () {
showModalBottomSheet(...)
},
)
```
FAB digunakan untuk membuka **BottomSheet** yang berisi form tambah task.
---
## 🪟 8. Bottom Sheet (Tambah Task)
Di dalam BottomSheet terdapat:
* Judul **Add Task ✨**
* TextField untuk input tugas
* Tombol **Add** untuk menyimpan data
BottomSheet otomatis menyesuaikan keyboard dengan `MediaQuery.of(context).viewInsets.bottom`.
link flutter online : https://zapp.run/edit/flutter-zr17y06hrr17z?entry=lib/main.dart&file=lib/main.dart
link flutter offline : https://zi4q06iri4r0.zapp.page/#/
---
## ✅ Kesimpulan
Aplikasi Todo List ini:
* Menggunakan konsep **StatefulWidget**
* Mengelola state dengan `setState()`
* Memanfaatkan UI modern Flutter seperti:
* BottomSheet
* FloatingActionButton
* ListView
Komentar
Posting Komentar