TUGAS MEMBUAT TO-DO LIST SEDERHANA

🧠 To-Do List Sederhana: Aplikasi Ringan, Fungsi Penting

Di era serba cepat ini, kita sering kewalahan dengan banyaknya hal yang harus dikerjakan. Namun kadang, solusi terbaik bukan aplikasi canggih dengan segudang fitur, tapi yang justru sederhana, ringan, dan tepat guna. Nah, di artikel ini kita akan membahas cara membuat to-do list sederhana menggunakan Flutter, framework UI modern dari Google.

Aplikasi ini cocok untuk kamu yang ingin:

• Belajar dasar-dasar Flutter dengan proyek nyata

• Membuat aplikasi ringan yang berguna sehari-hari

• Mengelola tugas-tugas harian secara simpel tapi efektif

---

💡 Fitur Aplikasi

Meski sederhana, aplikasi ini memiliki fitur penting:

• Tambah tugas

• Tandai tugas selesai (dengan centang)

• Hapus tugas

• Notifikasi snack bar sebagai feedback pengguna

• Dialog konfirmasi sebelum menghapus tugas

---

🔧 Kode Flutter: To-Do List Sederhana

Berikut adalah keseluruhan kode yang bisa langsung kamu jalankan:

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart'; // Tambahkan di pubspec.yaml

void main() => runApp(ToDoApp());

class ToDoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'To-Do App',
      theme: ThemeData(
        textTheme: GoogleFonts.poppinsTextTheme(),
        primarySwatch: Colors.indigo,
        scaffoldBackgroundColor: Colors.grey[100],
        useMaterial3: true,
      ),
      debugShowCheckedModeBanner: false,
      home: ToDoHomePage(),
    );
  }
}

class Task {
  String title;
  bool isDone;

  Task(this.title, {this.isDone = false});
}

class ToDoHomePage extends StatefulWidget {
  @override
  _ToDoHomePageState createState() => _ToDoHomePageState();
}

class _ToDoHomePageState extends State<ToDoHomePage> {
  final List<Task> _tasks = [];
  final TextEditingController _taskController = TextEditingController();

  void _addTask() {
    final text = _taskController.text.trim();
    if (text.isNotEmpty) {
      setState(() {
        _tasks.add(Task(text));
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(
            content: Text('Tugas berhasil ditambahkan!'),
            duration: Duration(seconds: 2),
            backgroundColor: Colors.indigo,
          ),
        );
        _taskController.clear();
      });
    }
  }

  void _toggleTask(int index) {
    setState(() {
      _tasks[index].isDone = !_tasks[index].isDone;
    });
  }

  void _removeTask(int index) async {
    final confirm = await showDialog<bool>(
      context: context,
      builder: (_) => AlertDialog(
        title: Text('Hapus Tugas?'),
        content: Text('Apakah kamu yakin ingin menghapus tugas ini?'),
        actions: [
          TextButton(
            onPressed: () => Navigator.pop(context, false),
            child: Text('Batal'),
          ),
          ElevatedButton(
            onPressed: () => Navigator.pop(context, true),
            style: ElevatedButton.styleFrom(backgroundColor: Colors.red),
            child: Text('Hapus'),
          ),
        ],
      ),
    );

    if (confirm == true) {
      setState(() {
        _tasks.removeAt(index);
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(
            content: Text('Tugas dihapus'),
            backgroundColor: Colors.red[400],
            duration: Duration(seconds: 2),
          ),
        );
      });
    }
  }

  void _showAddTaskDialog() {
    showDialog(
      context: context,
      builder: (_) => AlertDialog(
        title: Text('Tambah Tugas Baru'),
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(12),
        ),
        content: TextField(
          controller: _taskController,
          autofocus: true,
          decoration: InputDecoration(
            hintText: 'Contoh: Belajar Flutter',
            prefixIcon: Icon(Icons.edit),
            border: OutlineInputBorder(borderRadius: BorderRadius.circular(10)),
          ),
        ),
        actions: [
          TextButton(
            onPressed: () {
              Navigator.pop(context);
              _taskController.clear();
            },
            child: Text('Batal'),
          ),
          ElevatedButton(
            onPressed: () {
              Navigator.pop(context);
              _addTask();
            },
            child: Text('Tambah'),
          ),
        ],
      ),
    );
  }

  Widget _buildTaskItem(Task task, int index) {
    return AnimatedContainer(
      duration: Duration(milliseconds: 300),
      child: Card(
        elevation: 3,
        margin: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
        child: ListTile(
          leading: Checkbox(
            value: task.isDone,
            onChanged: (_) => _toggleTask(index),
            activeColor: Colors.indigo,
          ),
          title: Text(
            task.title,
            style: TextStyle(
              fontSize: 16,
              decoration: task.isDone ? TextDecoration.lineThrough : null,
              color: task.isDone ? Colors.grey : Colors.black,
              fontWeight: FontWeight.w500,
            ),
          ),
          trailing: IconButton(
            icon: Icon(Icons.delete_outline, color: Colors.red[400]),
            onPressed: () => _removeTask(index),
          ),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('To-Do List Sederhana 📝'),
        centerTitle: true,
        backgroundColor: Colors.indigo,
        foregroundColor: Colors.white,
      ),
      body: _tasks.isEmpty
          ? Center(
              child: Padding(
                padding: const EdgeInsets.all(32.0),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Icon(Icons.hourglass_empty, size: 80, color: Colors.grey[400]),
                    SizedBox(height: 20),
                    Text(
                      'Belum ada tugas',
                      style: TextStyle(fontSize: 20, color: Colors.grey[600]),
                    ),
                    SizedBox(height: 10),
                    Text(
                      'Tekan tombol + untuk mulai menambahkan tugas.',
                      textAlign: TextAlign.center,
                      style: TextStyle(color: Colors.grey[500]),
                    ),
                  ],
                ),
              ),
            )
          : ListView.builder(
              itemCount: _tasks.length,
              itemBuilder: (context, index) =>
                  _buildTaskItem(_tasks[index], index),
            ),
      floatingActionButton: FloatingActionButton.extended(
        onPressed: _showAddTaskDialog,
        icon: Icon(Icons.add),
        label: Text('Tambah Tugas'),
        backgroundColor: Colors.indigo,
      ),
    );
  }
}

---

🧪 Cara Menjalankan

1. Pastikan kamu sudah install Flutter SDK.

2. Buat project baru:

   flutter create todo_sederhana
   

3. Ganti isi file lib/main.dart dengan kode di atas.

4. Jalankan aplikasinya:

   flutter run
   

---

🚀 Penutup: Sederhana Tapi Manjur

To-do list tidak harus rumit. Aplikasi seperti ini justru menunjukkan bahwa kadang fungsi yang kuat datang dari desain yang sederhana. Dengan sedikit kode dan pendekatan minimalis, kamu bisa menciptakan alat produktivitas yang bisa kamu gunakan setiap hari.

 Dokumentasi: