Membuat To Do List Sederhana di DartPad

Halo, teman-teman! 👋

Kali ini kita akan belajar membuat aplikasi To Do List sederhana menggunakan Dart langsung di DartPad — tanpa perlu menginstal apa pun!

Aplikasi To Do List ini berguna untuk mencatat daftar tugas harian kita, menandai mana yang sudah selesai, dan menghapus tugas yang sudah tidak diperlukan.

🎯 Tujuan Pembelajaran

Melalui tutorial ini, kamu akan belajar:

Dasar pemrograman Dart.
Cara membuat daftar dinamis (list) untuk menyimpan data.
Mengelola input dan output di Dart.
Membuat logika sederhana untuk menambah, menampilkan, dan menghapus tugas.

💻 Apa Itu DartPad?

DartPad adalah editor online resmi dari tim Dart (Google) yang bisa digunakan untuk menulis dan menjalankan kode Dart langsung dari browser.
Kamu bisa mengunjungi: 👉 https://dartpad.dev

Tidak perlu instalasi — cukup buka situsnya, tulis kode, lalu tekan tombol Run ▶️.

🧩 Langkah-langkah Membuat To Do List

1. Buka DartPad

Kunjungi https://dartpad.dev, lalu pilih mode Console (bukan Flutter), karena kita akan membuat aplikasi berbasis teks terlebih dahulu.

2. Ketikkan Kode Berikut


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(
      title: 'Todo List App',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        fontFamily: 'Poppins',
        primaryColor: const Color(0xFF4D9EF6),
      ),
      home: const TodoHomePage(),
    );
  }
}

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

  @override
  State<TodoHomePage> createState() => _TodoHomePageState();
}

class _TodoHomePageState extends State<TodoHomePage> {
  final List<Map<String, dynamic>> _tasks = [];
  final TextEditingController _controller = TextEditingController();

  void _addTask() {
    if (_controller.text.trim().isEmpty) return;
    setState(() {
      _tasks.add({'title': _controller.text.trim(), 'done': false});
      _controller.clear();
    });
  }

  void _toggleTask(int index) {
    setState(() {
      _tasks[index]['done'] = !_tasks[index]['done'];
    });
  }

  void _deleteTask(int index) {
    setState(() {
      _tasks.removeAt(index);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFF2F6FC),
      appBar: AppBar(
        backgroundColor: const Color(0xFF4D9EF6),
        elevation: 0,
        centerTitle: true,
        title: const Text(
          "Todo List App",
          style: TextStyle(
            color: Colors.white,
            fontWeight: FontWeight.bold,
            letterSpacing: 0.5,
          ),
        ),
      ),

      // Floating Button
      floatingActionButton: FloatingActionButton(
        backgroundColor: const Color(0xFF4D9EF6),
        onPressed: _addTask,
        child: const Icon(Icons.add, size: 28, color: Colors.white),
      ),

      body: Column(
        children: [
          // Header biru seperti gambar
          Container(
            height: 140,
            width: double.infinity,
            decoration: const BoxDecoration(
              gradient: LinearGradient(
                colors: [Color(0xFF4D9EF6), Color(0xFF78C8F9)],
                begin: Alignment.topLeft,
                end: Alignment.bottomRight,
              ),
              borderRadius: BorderRadius.only(
                bottomLeft: Radius.circular(30),
                bottomRight: Radius.circular(30),
              ),
            ),
            child: Padding(
              padding: const EdgeInsets.all(20),
              child: TextField(
                controller: _controller,
                decoration: InputDecoration(
                  hintText: "Tambah tugas baru...",
                  filled: true,
                  fillColor: Colors.white,
                  suffixIcon: IconButton(
                    icon: const Icon(Icons.send, color: Color(0xFF4D9EF6)),
                    onPressed: _addTask,
                  ),
                  contentPadding: const EdgeInsets.symmetric(horizontal: 15, vertical: 10),
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(15),
                    borderSide: BorderSide.none,
                  ),
                ),
                onSubmitted: (_) => _addTask(),
              ),
            ),
          ),

          // Daftar tugas
          Expanded(
            child: _tasks.isEmpty
                ? const Center(
                    child: Text(
                      "Belum ada tugas ✨\nTambahkan tugas baru di atas!",
                      textAlign: TextAlign.center,
                      style: TextStyle(color: Colors.grey, fontSize: 16),
                    ),
                  )
                : ListView.builder(
                    padding: const EdgeInsets.all(20),
                    itemCount: _tasks.length,
                    itemBuilder: (context, index) {
                      final task = _tasks[index];
                      return Container(
                        margin: const EdgeInsets.only(bottom: 15),
                        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
                        decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.circular(15),
                          boxShadow: [
                            BoxShadow(
                              color: Colors.grey.withOpacity(0.15),
                              blurRadius: 6,
                              offset: const Offset(0, 3),
                            ),
                          ],
                        ),
                        child: Row(
                          children: [
                            GestureDetector(
                              onTap: () => _toggleTask(index),
                              child: Icon(
                                task['done']
                                    ? Icons.check_circle
                                    : Icons.circle_outlined,
                                color: task['done'] ? Colors.green : Colors.grey,
                                size: 28,
                              ),
                            ),
                            const SizedBox(width: 12),
                            Expanded(
                              child: Text(
                                task['title'],
                                style: TextStyle(
                                  fontSize: 16,
                                  fontWeight: FontWeight.w500,
                                  decoration: task['done']
                                      ? TextDecoration.lineThrough
                                      : TextDecoration.none,
                                  color: task['done']
                                      ? Colors.grey
                                      : Colors.black87,
                                ),
                              ),
                            ),
                            IconButton(
                              icon: const Icon(Icons.delete_outline, color: Colors.redAccent),
                              onPressed: () => _deleteTask(index),
                            ),
                          ],
                        ),
                      );
                    },
                  ),
          ),
        ],
      ),
    );
  }
}

dibuat oleh: Rianto

🧠 Penjelasan Singkat Kode

List<String> todoList = [];
Menyimpan semua tugas dalam bentuk list.
stdin.readLineSync()
Digunakan untuk membaca input dari pengguna di console.
switch dan case
Untuk memilih menu berdasarkan input pengguna.
todoList.add(task) & todoList.removeAt(index)
Menambahkan dan menghapus tugas dari list.

⚙️ Menjalankan Program

Sayangnya, DartPad versi online tidak mendukung dart:io (input console).
Untuk menguji kode di atas, kamu bisa:

Menjalankannya di Visual Studio Code atau Dart SDK lokal,
atau
Mengubah versi program agar menggunakan simulasi data otomatis (tanpa input manual).

Contoh versi yang bisa dijalankan langsung di DartPad 👇

🚀 Versi Simulasi (Bisa Langsung Dijalankan di DartPad)


void main() {
  List<String> todoList = [];

  // Tambahkan beberapa tugas
  todoList.add('Belajar Dart');
  todoList.add('Ngoding di DartPad');
  todoList.add('Review hasil kerja');

  print('=== TO DO LIST ===');
  for (int i = 0; i < todoList.length; i++) {
    print('${i + 1}. ${todoList[i]}');
  }

  // Hapus satu tugas
  todoList.removeAt(1);

  print('\nSetelah dihapus:');
  for (int i = 0; i < todoList.length; i++) {
    print('${i + 1}. ${todoList[i]}');
  }
}

Kamu bisa langsung copy-paste kode di atas ke DartPad dan tekan Run ▶️.

🌟 Penutup

Sekarang kamu sudah bisa membuat To Do List sederhana menggunakan Dart!
Meskipun masih berbasis teks, konsep dasarnya sudah mencakup:

List untuk menyimpan data,
Struktur logika dengan switch,
Dan operasi dasar CRUD (Create, Read, Delete).

Kamu bisa mengembangkan proyek ini menjadi versi Flutter UI agar tampil lebih interaktif di Android/iOS.

💡 Ide Pengembangan

Beberapa ide untuk pengembangan selanjutnya:

Menandai tugas sebagai “selesai”.
Menyimpan data menggunakan file lokal.
Membuat tampilan menggunakan Flutter.
Menambahkan waktu (deadline) setiap tugas.

Cari Blog Ini

Flutter Notes by Rianto