📱 Membuat Aplikasi To-Do List dengan Flutter: Atur Tugas Jadi Lebih Mudah!

🚀 Dari Tugas yang Menumpuk Menjadi Lebih Teratur

Pernah merasa tugas sekolah terlalu banyak sampai bingung harus mengerjakan yang mana terlebih dahulu?

Mulai dari tugas coding, laporan, presentasi, hingga belajar untuk ujian. Kalau semuanya hanya disimpan di dalam ingatan, tentu sangat mudah untuk lupa.

Nah, salah satu solusi sederhananya adalah menggunakan To-Do List.

Pada artikel ini, kita akan membahas bagaimana membuat sebuah aplikasi To-Do List menggunakan Flutter. Selain membantu mengatur tugas, project ini juga cocok untuk belajar dasar-dasar pengembangan aplikasi mobile.

💡 Apa Itu To-Do List?

To-Do List adalah daftar pekerjaan atau aktivitas yang perlu dilakukan.

Contohnya:

☐ Mengerjakan tugas Bahasa Indonesia
☐ Membuat project Flutter
☐ Belajar database
☐ Membuat laporan
☐ Mempersiapkan presentasi

Ketika sebuah tugas sudah selesai, pengguna dapat memberikan tanda centang.

Sederhana, tetapi sangat membantu untuk mengatur aktivitas sehari-hari.

🦋 Kenapa Menggunakan Flutter?

Flutter adalah framework yang digunakan untuk membuat aplikasi dengan satu codebase yang dapat dikembangkan untuk berbagai platform.

Flutter menggunakan bahasa pemrograman Dart dan memiliki banyak widget untuk membangun tampilan aplikasi.

Flutter cocok digunakan untuk membuat project To-Do List karena:

⚡ 1. Tampilan Fleksibel

Flutter menyediakan banyak widget sehingga tampilan aplikasi dapat dibuat modern dan menarik.

💻 2. Cocok untuk Belajar

Project To-Do List dapat digunakan untuk mempelajari konsep dasar seperti:

Widget
State
Input data
Button
List
Navigasi
CRUD
Database

🎨 3. Mudah Dikembangkan

Aplikasi sederhana dapat dikembangkan menjadi aplikasi yang lebih lengkap dengan menambahkan login, database, deadline, kategori, dan berbagai fitur lainnya.

🎯 Fitur Aplikasi To-Do List

Aplikasi yang kita buat dapat memiliki beberapa fitur utama:

Fitur	Fungsi
➕ Tambah Tugas	Menambahkan tugas baru
✏️ Edit	Mengubah tugas
🗑️ Hapus	Menghapus tugas
✅ Selesai	Menandai tugas selesai
📅 Deadline	Menentukan batas waktu
⭐ Prioritas	Menentukan tingkat kepentingan
🔍 Pencarian	Mencari tugas
📊 Statistik	Melihat jumlah tugas

Untuk versi dasar, kita dapat memulai dengan tiga fitur utama:

Tambah → Selesai → Hapus

Setelah itu, fitur lainnya dapat ditambahkan secara bertahap.

🏗️ Konsep Sederhana Aplikasi

Secara sederhana, aplikasi To-Do List memiliki alur:

User → Flutter App → Data Tugas → Tampilan To-Do List

Contohnya:

User membuka aplikasi.
User menekan tombol Tambah Tugas.
User memasukkan nama tugas.
Flutter menyimpan data tugas.
Tugas ditampilkan pada halaman utama.
User menyelesaikan tugas.
User menekan checkbox.
Status tugas berubah menjadi selesai.

🎨 Rancangan Tampilan

Aplikasi dapat dibuat dengan desain sederhana dan modern.

🏠 Halaman Utama

┌─────────────────────────────┐
│  👋 Hello!                  │
│  Let's be productive today  │
│                             │
│  📋 Tugas Hari Ini          │
│                             │
│  ☑ Belajar Flutter          │
│  ☐ Membuat Database         │
│  ☐ Mengerjakan Laporan      │
│  ☐ Membuat Presentasi       │
│                             │
│                    ＋        │
└─────────────────────────────┘

Tampilan seperti ini membuat pengguna dapat langsung melihat tugas yang harus dikerjakan.

🧩 Struktur Project Flutter

Salah satu struktur sederhana yang dapat digunakan:

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

Pembagian tersebut membuat kode lebih terorganisir ketika aplikasi mulai berkembang.

💻 Contoh Program Sederhana

Berikut contoh sederhana aplikasi To-Do List menggunakan Flutter.

import 'package:flutter/material.dart';

void main() {
  runApp(const TodoApp());
}

class TodoApp extends StatelessWidget {
  const TodoApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'To-Do List',
      theme: ThemeData(
        colorSchemeSeed: Colors.blue,
        useMaterial3: true,
      ),
      home: const TodoPage(),
    );
  }
}

class TodoPage extends StatefulWidget {
  const TodoPage({super.key});

  @override
  State<TodoPage> createState() => _TodoPageState();
}

class _TodoPageState extends State<TodoPage> {
  final TextEditingController controller = TextEditingController();

  final List<String> tasks = [];

  void addTask() {
    if (controller.text.isNotEmpty) {
      setState(() {
        tasks.add(controller.text);
        controller.clear();
      });
    }
  }

  void deleteTask(int index) {
    setState(() {
      tasks.removeAt(index);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('📋 To-Do List'),
      ),

      body: ListView.builder(
        itemCount: tasks.length,
        itemBuilder: (context, index) {
          return ListTile(
            leading: const Icon(Icons.check_circle_outline),
            title: Text(tasks[index]),
            trailing: IconButton(
              icon: const Icon(Icons.delete),
              onPressed: () => deleteTask(index),
            ),
          );
        },
      ),

      floatingActionButton: FloatingActionButton(
        onPressed: () {
          showDialog(
            context: context,
            builder: (context) {
              return AlertDialog(
                title: const Text('Tambah Tugas'),

                content: TextField(
                  controller: controller,
                  decoration: const InputDecoration(
                    hintText: 'Masukkan tugas',
                  ),
                ),

                actions: [
                  TextButton(
                    onPressed: () {
                      Navigator.pop(context);
                    },
                    child: const Text('Batal'),
                  ),

                  ElevatedButton(
                    onPressed: () {
                      addTask();
                      Navigator.pop(context);
                    },
                    child: const Text('Tambah'),
                  ),
                ],
              );
            },
          );
        },
        child: const Icon(Icons.add),
      ),
    );
  }
}

🔍 Bagaimana Kode Tersebut Bekerja?

Walaupun terlihat panjang, konsepnya sebenarnya cukup sederhana.

`TextEditingController`

Digunakan untuk mengambil teks yang dimasukkan pengguna.

final TextEditingController controller = TextEditingController();

Misalnya pengguna mengetik:

"Mengerjakan tugas Flutter"

Teks tersebut akan dibaca oleh controller.

`List<String> tasks`

Digunakan untuk menyimpan daftar tugas sementara.

final List<String> tasks = [];

Setiap kali pengguna menambahkan tugas, data dimasukkan ke dalam list tersebut.

`addTask()`

Function ini digunakan untuk menambahkan tugas.

void addTask() {
  if (controller.text.isNotEmpty) {
    setState(() {
      tasks.add(controller.text);
      controller.clear();
    });
  }
}

setState() digunakan agar tampilan aplikasi diperbarui setelah data berubah.

🗑️ `deleteTask()`

Function ini digunakan untuk menghapus tugas.

void deleteTask(int index) {
  setState(() {
    tasks.removeAt(index);
  });
}

Ketika tombol hapus ditekan, tugas pada posisi tertentu akan dihapus dari list.

🗄️ Bagaimana dengan Database?

Pada contoh di atas, data hanya disimpan sementara di dalam aplikasi.

Artinya, ketika aplikasi ditutup, data dapat hilang.

Untuk aplikasi yang lebih serius, kita dapat menggunakan database.

Contohnya:

SQLite
Hive
Firebase
Supabase

Database dapat digunakan untuk menyimpan data seperti:

ID
Judul Tugas
Deskripsi
Deadline
Prioritas
Status
Tanggal Dibuat

Contoh tabel:

ID	Tugas	Deadline	Prioritas	Status
1	Belajar Flutter	28 Agustus	Tinggi	Selesai
2	Membuat Database	29 Agustus	Tinggi	Belum
3	Membuat Laporan	30 Agustus	Sedang	Belum

🔄 CRUD pada Aplikasi To-Do List

Salah satu konsep penting yang dapat dipelajari dari project ini adalah CRUD.

CRUD terdiri dari:

🟢 Create

Menambahkan tugas baru.

🔵 Read

Menampilkan daftar tugas.

🟡 Update

Mengubah atau memperbarui tugas.

🔴 Delete

Menghapus tugas.

Jadi, sebuah aplikasi To-Do List sederhana sebenarnya sudah dapat menjadi latihan yang bagus untuk memahami konsep pengolahan data.

🌟 Ide Pengembangan Aplikasi

Setelah aplikasi dasar berhasil dibuat, kita dapat menambahkan fitur yang lebih menarik.

🔔 Notifikasi

Aplikasi dapat mengingatkan pengguna ketika deadline tugas sudah dekat.

📅 Kalender

Tugas dapat dikelompokkan berdasarkan tanggal.

⭐ Prioritas

Pengguna dapat menentukan:

Rendah → Sedang → Tinggi

🌙 Dark Mode

Pengguna dapat memilih tampilan terang atau gelap.

👤 Login

Setiap pengguna dapat memiliki daftar tugas masing-masing.

☁️ Cloud Database

Data dapat disimpan secara online sehingga dapat diakses dari perangkat lain.

🧠 Apa yang Bisa Dipelajari dari Project Ini?

Membuat To-Do List bukan hanya tentang membuat daftar tugas.

Project ini dapat membantu kita memahami bagaimana sebuah aplikasi bekerja.

Kita bisa belajar:

UI → Input → Logic → State → Database → Output

Dengan project sederhana ini, kita sudah mulai mengenal proses pengembangan aplikasi mobile.

🚀 Kesimpulan

Aplikasi To-Do List menggunakan Flutter merupakan project sederhana tetapi sangat bermanfaat untuk belajar mobile development.

Dari project ini, kita dapat mempelajari berbagai konsep penting seperti Widget, State Management, Input Data, List, CRUD, hingga Database.

Yang paling menarik, aplikasi sederhana ini masih bisa terus dikembangkan.

Mulai dari hanya memiliki fitur:

➕ Tambah → ✅ Selesai → 🗑️ Hapus

hingga menjadi aplikasi produktivitas lengkap dengan:

🔐 Login → 📅 Kalender → 🔔 Notifikasi → ☁️ Cloud Database → 📊 Statistik

Jadi, kalau kamu sedang belajar Flutter dan mencari project untuk latihan, To-Do List bisa menjadi pilihan yang tepat untuk memulai.

“Jangan biarkan tugas menumpuk di kepala. Tulis, atur, kerjakan, dan selesaikan! 🚀”

📌 Kesimpulan Singkat

Flutter + To-Do List = Project sederhana untuk belajar menjadi Mobile Developer.

Mulai dari aplikasi kecil, pelajari setiap fiturnya, lalu kembangkan sedikit demi sedikit. Dari satu project sederhana, kamu bisa belajar banyak hal tentang bagaimana sebuah aplikasi mobile dibuat.