Membuat Projek Flutter - To Do List Projek

- Oktober 23, 2025

🌸 Membuat Aplikasi To-Do List Estetik dengan Flutter — Produktivitas yang Indah dan Modern

“Desain yang baik bukan hanya tentang tampilan — tapi juga tentang bagaimana sesuatu bekerja.”
— Steve Jobs

✍️ Ditulis oleh: Muhammad Rasya Raka Pratama XI RPL 1

💻 Project: To-Do List Estetik Flutter

📅 Tanggal: 24 Oktober 2025

💡 Pendahuluan

Dalam kehidupan digital yang serba cepat, kita sering membutuhkan alat sederhana namun kuat untuk menjaga produktivitas.
Aplikasi to-do list adalah salah satu solusi terbaik. Namun, kebanyakan aplikasi hanya berfokus pada fungsi, bukan pengalaman visual.

Maka dari itu, saya membuat proyek To-Do List App Estetik di Flutter, dengan tujuan menghadirkan aplikasi yang cantik, intuitif, dan menyenangkan digunakan setiap hari.

✨ Fitur Utama Aplikasi

Berikut adalah beberapa fitur yang saya implementasikan:

✅ 1. Status Completed — Teks Tercoret

Tugas yang sudah diselesaikan otomatis berubah warna menjadi abu-abu dan teksnya tercoret:


Text(
  task.title,
  style: TextStyle(
    color: task.isCompleted ? Colors.grey : Colors.black,
    decoration: task.isCompleted ? TextDecoration.lineThrough : null,
  ),
)

Efek sederhana ini memberi kesan “selesai dengan bangga” yang menenangkan mata.

🎨 2. Kategori Tugas dengan Warna Berbeda

Setiap tugas memiliki kategori, seperti Work, Study, atau Personal, masing-masing dengan warna khas.
Dengan begini, pengguna bisa cepat mengenali prioritasnya.


Color get categoryColor {
  switch (category) {
    case 'Work':
      return Colors.blueAccent;
    case 'Study':
      return Colors.purpleAccent;
    case 'Personal':
      return Colors.pinkAccent;
    default:
      return Colors.grey;
  }
}

🧼 3. Swipe to Delete dengan Dismissible Widget

Geser tugas ke kiri untuk menghapusnya — dan tampilkan konfirmasi agar pengguna tidak menyesal.


Dismissible(
  key: ValueKey(task.title),
  onDismissed: (_) => _deleteTask(index),
  background: Container(
    color: Colors.redAccent,
    alignment: Alignment.centerRight,
    padding: EdgeInsets.symmetric(horizontal: 20),
    child: Icon(Icons.delete, color: Colors.white),
  ),
  child: TaskTile(task: task),
)

🔔 4. SnackBar Konfirmasi

Setiap kali tugas dihapus, muncul SnackBar yang memungkinkan pengguna untuk Undo.


ScaffoldMessenger.of(context).showSnackBar(
  SnackBar(
    content: Text('Deleted "${removedTask.title}"'),
    action: SnackBarAction(
      label: 'Undo',
      onPressed: () => setState(() => _tasks.insert(index, removedTask)),
    ),
  ),
);

🌙 5. Dark Mode

Cukup tekan satu ikon di AppBar untuk beralih antara Light dan Dark Mode, menyesuaikan suasana hati pengguna.


IconButton(
  icon: Icon(isDarkMode ? Icons.dark_mode : Icons.light_mode),
  onPressed: toggleTheme,
)

🌸 6. Empty State yang Menarik

Saat belum ada tugas, aplikasi menampilkan tampilan “kosong” yang lembut dan memotivasi:


Center(
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Icon(Icons.inbox_outlined, size: 80, color: Colors.grey[400]),
      SizedBox(height: 16),
      Text(
        "No tasks yet ✨\nStart your productive journey!",
        textAlign: TextAlign.center,
        style: TextStyle(color: Colors.grey[600]),
      ),
    ],
  ),
)

Kamu juga bisa menggantinya dengan animasi Lottie agar lebih hidup.

🌀 7. Animasi Checklist yang Halus

Setiap kali tugas dicentang, ikon berubah warna dengan animasi lembut menggunakan AnimatedContainer.


AnimatedContainer(
  duration: Duration(milliseconds: 300),
  decoration: BoxDecoration(
    color: task.isCompleted ? task.categoryColor : Colors.transparent,
    border: Border.all(color: task.categoryColor, width: 2),
    borderRadius: BorderRadius.circular(8),
  ),
  child: task.isCompleted
      ? Icon(Icons.check, color: Colors.white, size: 18)
      : null,
)

🧠 Struktur Folder

Agar kode tetap bersih dan mudah dikembangkan:


lib/
 ├─ models/
 │   └─ task.dart
 ├─ screens/
 │   └─ home_screen.dart
 ├─ widgets/
 │   └─ task_tile.dart
 └─ main.dart

🚀 Teknologi yang Digunakan

Flutter & Dart untuk UI modern multiplatform
Material 3 (Material You) untuk tampilan natural dan adaptif
AnimatedContainer & AnimatedOpacity untuk transisi halus
Dismissible Widget untuk swipe gesture
SnackBar sebagai umpan balik interaktif

🔧 Tantangan yang Dihadapi

Salah satu tantangan utama adalah konsistensi struktur file.
Kesalahan kecil seperti model vs models dapat membuat Flutter gagal membangun proyek.
Menjaga struktur dan nama folder yang konsisten adalah kunci agar build berjalan lancar.

🌈 Hasil Akhir

Aplikasi yang dihasilkan tampak bersih, minimalis, dan fungsional.
Setiap elemen bergerak dengan lembut, memberi pengalaman visual yang menenangkan.

🖼️ Preview Tampilan (contoh):

View disni https://zvy06d9wz06.zapp.page/#/

💬 Kesimpulan

Membangun aplikasi produktivitas tidak harus membosankan.
Dengan Flutter, kita bisa menghadirkan UI/UX yang indah, fungsional, dan menyenangkan digunakan.

Aplikasi ini membuktikan bahwa:

Produktivitas dan Estetika bisa berjalan beriringan.

🔮 Rencana Pengembangan Selanjutnya

Untuk versi berikutnya, saya berencana menambahkan:

Penyimpanan lokal (Hive / SharedPreferences)
Animasi Lottie di empty state
Kalender tugas
Mode fokus dan notifikasi pintar

📚 Penutup

Flutter memberikan kebebasan kreatif untuk menggabungkan desain dan logika dalam satu tempat.
Dengan proyek ini, saya belajar bahwa detail kecil seperti animasi dan warna bisa membuat pengalaman pengguna terasa luar biasa.

Cari Blog Ini

RASYANEWS