Membuat Aplikasi To Do List Menggunakan DartPad

 

🚀 Membuat Aplikasi To Do List Sederhana Menggunakan DartPad

Pernah lupa dengan tugas yang harus dikerjakan? Atau punya banyak kegiatan tetapi bingung harus mulai dari mana? 🤔

Nah, To Do List bisa menjadi solusi sederhana untuk membantu mencatat dan mengatur semua tugas agar lebih terorganisir.

Pada artikel kali ini, kita akan mengenal cara membuat Aplikasi To Do List sederhana menggunakan Flutter dan Dart melalui DartPad. Menariknya, kita dapat mencoba kode secara langsung melalui browser tanpa harus membuat project Flutter yang rumit.

💡 Apa Itu To Do List?

To Do List adalah aplikasi yang digunakan untuk mencatat daftar tugas atau kegiatan yang harus dilakukan.

Contohnya:

✅ Mengerjakan tugas Flutter
✅ Membuat laporan
✅ Belajar Dart
✅ Mengumpulkan tugas

Dengan adanya daftar tersebut, kita dapat lebih mudah mengetahui pekerjaan yang sudah dan belum selesai.

🧑‍💻 Apa Itu DartPad?

DartPad merupakan platform online yang memungkinkan kita menulis dan menjalankan kode Dart langsung melalui browser.

DartPad sangat cocok digunakan oleh pemula karena kita tidak perlu melakukan instalasi yang rumit untuk mencoba kode Dart dan Flutter.

Dengan DartPad, kita cukup membuka browser, memasukkan kode, lalu menjalankannya menggunakan tombol Run.

🎯 Tujuan Pembuatan Aplikasi

Aplikasi ini dibuat untuk:

• Belajar dasar pemrograman Dart.
• Mengenal framework Flutter.
• Memahami penggunaan widget.
• Belajar membuat aplikasi sederhana.
• Mempraktikkan penggunaan TextField, Checkbox, ListView, dan setState().

✨ Fitur Aplikasi

Walaupun sederhana, aplikasi To Do List ini memiliki beberapa fitur yang berguna:

➕ Menambahkan Tugas

Pengguna dapat mengetik tugas pada kolom input dan menekan tombol Tambah.

📋 Melihat Daftar Tugas

Tugas yang ditambahkan akan langsung muncul pada halaman aplikasi.

☑️ Menandai Tugas Selesai

Jika tugas sudah selesai, pengguna dapat menekan checkbox. Tugas akan ditampilkan dengan tulisan tercoret.

🗑️ Menghapus Tugas

Tugas yang sudah tidak diperlukan dapat dihapus menggunakan ikon tempat sampah.

🛠️ Alat yang Digunakan

Untuk membuat aplikasi ini, kita membutuhkan:

• DartPad
• Dart
• Flutter
• Browser
• Laptop atau komputer

💻 Coding Aplikasi

Berikut kode sederhana yang dapat digunakan untuk membuat aplikasi To Do List:

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'To Do List',
      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();

  List<String> tugas = [];
  List<bool> selesai = [];

  void tambahTugas() {
    if (controller.text.isNotEmpty) {
      setState(() {
        tugas.add(controller.text);
        selesai.add(false);
        controller.clear();
      });
    }
  }

  void hapusTugas(int index) {
    setState(() {
      tugas.removeAt(index);
      selesai.removeAt(index);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('To Do List'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            Row(
              children: [
                Expanded(
                  child: TextField(
                    controller: controller,
                    decoration: const InputDecoration(
                      hintText: 'Masukkan tugas...',
                      border: OutlineInputBorder(),
                    ),
                  ),
                ),
                const SizedBox(width: 8),
                ElevatedButton(
                  onPressed: tambahTugas,
                  child: const Text('Tambah'),
                ),
              ],
            ),

            const SizedBox(height: 20),

            Expanded(
              child: ListView.builder(
                itemCount: tugas.length,
                itemBuilder: (context, index) {
                  return ListTile(
                    leading: Checkbox(
                      value: selesai[index],
                      onChanged: (value) {
                        setState(() {
                          selesai[index] = value!;
                        });
                      },
                    ),
                    title: Text(
                      tugas[index],
                      style: TextStyle(
                        decoration: selesai[index]
                            ? TextDecoration.lineThrough
                            : TextDecoration.none,
                      ),
                    ),
                    trailing: IconButton(
                      icon: const Icon(Icons.delete),
                      onPressed: () => hapusTugas(index),
                    ),
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

🔍 Penjelasan Singkat

Beberapa bagian penting dari kode tersebut adalah:

TextField
Digunakan untuk memasukkan nama tugas.

ElevatedButton
Digunakan sebagai tombol untuk menambahkan tugas.

ListView.builder
Digunakan untuk menampilkan tugas dalam bentuk daftar.

Checkbox
Digunakan untuk menandai tugas yang sudah selesai.

IconButton
Digunakan untuk menghapus tugas.

setState()
Digunakan untuk memperbarui tampilan aplikasi ketika data tugas berubah.

▶️ Cara Menjalankan di DartPad

Untuk mencoba aplikasi ini, ikuti langkah berikut:

1. Buka DartPad melalui browser.
2. Pilih mode Flutter.
3. Hapus kode bawaan yang ada.
4. Salin kode To Do List di atas.
5. Tempelkan kode ke DartPad.
6. Klik tombol Run.
7. Tunggu hingga aplikasi muncul pada bagian preview.

Setelah berhasil dijalankan, kita dapat langsung mencoba menambahkan beberapa tugas.

🎨 Hasil Aplikasi

Tampilan aplikasi dibuat sederhana. Pada bagian atas terdapat kolom untuk memasukkan tugas dan tombol Tambah.

Setelah tugas ditambahkan, tugas akan muncul dalam daftar. Pengguna dapat mencentang tugas yang sudah selesai atau menghapusnya jika sudah tidak diperlukan.

Contoh tugas yang dapat dimasukkan:

📚 Belajar Dart
💻 Mengerjakan tugas Flutter
📝 Membuat laporan
📤 Mengumpulkan tugas

🌟 Pengembangan Selanjutnya

Aplikasi ini masih sederhana sehingga masih dapat dikembangkan menjadi aplikasi yang lebih lengkap.

Beberapa fitur yang dapat ditambahkan adalah:

• 📅 Deadline tugas
• 🔔 Notifikasi pengingat
• 🗂️ Kategori tugas
• 💾 Penyimpanan data
• 🔎 Fitur pencarian
• 🌙 Dark Mode
• 📊 Persentase tugas yang sudah selesai

🏁 Kesimpulan

Membuat Aplikasi To Do List menggunakan DartPad merupakan salah satu cara yang menyenangkan untuk belajar Dart dan Flutter.

Dari proyek sederhana ini, kita dapat belajar bagaimana membuat tampilan aplikasi, menerima input dari pengguna, menampilkan data dalam bentuk daftar, menggunakan checkbox, menghapus data, dan memperbarui tampilan menggunakan setState().

Walaupun masih sederhana, aplikasi ini dapat menjadi langkah awal untuk membuat aplikasi Flutter yang lebih kompleks dan menarik.

💙 Belajar coding tidak harus langsung membuat aplikasi yang rumit. Mulailah dari aplikasi sederhana, pahami setiap kodenya, lalu kembangkan sedikit demi sedikit!

📌 Tag

#DartPad #Flutter #Dart #ToDoList #BelajarFlutter #Coding #AplikasiMobile #Pemrograman #BelajarCoding