Membuat Aplikasi To-Do List Cantik dengan Flutter – UI/UX Modern untuk Produktivitas

 

🎯 Judul:

Membuat Aplikasi To-Do List Cantik dengan Flutter – UI/UX Modern untuk Produktivitas

---

📝 Pendahuluan:

Ingin membuat aplikasi to-do list sederhana namun dengan desain yang modern dan fungsional? Dalam tutorial ini, kita akan membangun aplikasi produktivitas berbasis Flutter yang tidak hanya berfungsi dengan baik, tetapi juga memiliki UI/UX yang memukau.

📱 Fitur Aplikasi:

• Menambahkan tugas baru

• Menandai tugas selesai

• Menghapus tugas

• Desain modern dan clean

• Responsive dan ringan

---

📦 Dependencies yang digunakan:

Untuk versi awal, kita hanya menggunakan Flutter SDK, tanpa package tambahan. Namun kamu bisa menambahkan google_fonts, hive, atau flutter_animate untuk versi lanjutan.

---

💻 Kode Lengkap: main.dart

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: 'To-Do List Cantik',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.indigo,
        scaffoldBackgroundColor: const Color(0xFFF3F4F6),
        fontFamily: 'Arial',
        useMaterial3: true,
      ),
      home: const TodoHomePage(),
    );
  }
}

class TodoItem {
  String title;
  bool isDone;

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

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

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

class _TodoHomePageState extends State<TodoHomePage> {
  final List<TodoItem> _todos = [];
  final TextEditingController _controller = TextEditingController();

  void _addTodo() {
    String text = _controller.text.trim();
    if (text.isNotEmpty) {
      setState(() {
        _todos.add(TodoItem(title: text));
        _controller.clear();
      });
    }
  }

  void _toggleDone(int index) {
    setState(() {
      _todos[index].isDone = !_todos[index].isDone;
    });
  }

  void _deleteTodo(int index) {
    setState(() {
      _todos.removeAt(index);
    });
  }

  Widget _buildTodoCard(TodoItem todo, int index) {
    return AnimatedContainer(
      duration: const Duration(milliseconds: 300),
      curve: Curves.easeInOut,
      margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 6),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(12),
        boxShadow: [
          BoxShadow(
            color: Colors.grey.shade200,
            blurRadius: 8,
            offset: const Offset(0, 4),
          )
        ],
      ),
      child: ListTile(
        leading: IconButton(
          icon: Icon(
            todo.isDone ? Icons.check_circle : Icons.radio_button_unchecked,
            color: todo.isDone ? Colors.green : Colors.grey,
          ),
          onPressed: () => _toggleDone(index),
        ),
        title: Text(
          todo.title,
          style: TextStyle(
            decoration: todo.isDone ? TextDecoration.lineThrough : null,
            color: todo.isDone ? Colors.grey : Colors.black87,
            fontWeight: FontWeight.w500,
            fontSize: 16,
          ),
        ),
        trailing: IconButton(
          icon: const Icon(Icons.delete_outline, color: Colors.redAccent),
          onPressed: () => _deleteTodo(index),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(
          'To-Do List 📝',
          style: TextStyle(fontWeight: FontWeight.bold),
        ),
        centerTitle: true,
        backgroundColor: Colors.indigo,
        foregroundColor: Colors.white,
        elevation: 0,
      ),
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(16),
            child: TextField(
              controller: _controller,
              decoration: InputDecoration(
                hintText: 'Tambahkan tugas baru...',
                prefixIcon: const Icon(Icons.add_task),
                filled: true,
                fillColor: Colors.white,
                contentPadding: const EdgeInsets.symmetric(
                    vertical: 14, horizontal: 16),
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(12),
                  borderSide: BorderSide.none,
                ),
              ),
              onSubmitted: (_) => _addTodo(),
            ),
          ),
          Expanded(
            child: _todos.isEmpty
                ? const Center(
                    child: Text(
                      'Belum ada tugas.\nAyo mulai produktif! 🚀',
                      textAlign: TextAlign.center,
                      style: TextStyle(
                        fontSize: 16,
                        color: Colors.grey,
                      ),
                    ),
                  )
                : ListView.builder(
                    itemCount: _todos.length,
                    itemBuilder: (context, index) =>
                        _buildTodoCard(_todos[index], index),
                  ),
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton.extended(
        onPressed: _addTodo,
        icon: const Icon(Icons.add),
        label: const Text('Tambah'),
        backgroundColor: Colors.indigo,
      ),
    );
  }
}

---

🔍 Penjelasan Kode:

✅ Struktur Utama:

• TodoApp: Root widget yang menjalankan MaterialApp

• TodoHomePage: Halaman utama yang menampilkan daftar tugas

📄 Data Model:

class TodoItem {
  String title;
  bool isDone;
}

Untuk menyimpan tiap tugas dan statusnya (selesai/belum).

🧠 State Management:

Menggunakan setState() karena aplikasi masih sederhana.

🎨 UI/UX Highlights:

• Desain modern dengan Card, ListTile, dan BoxShadow

• Responsif dan ringan

• Animasi halus saat item ditambah/dihapus

• Warna cerah dan kontras jelas

---

🌟 Pengembangan Selanjutnya:

Kamu bisa menambahkan fitur berikut agar aplikasi lebih canggih:

• Menyimpan data menggunakan SharedPreferences atau Hive

• Dark mode otomatis

• Re-order tugas dengan drag & drop

• Animasi saat item selesai

• Filter tugas (semua / selesai / belum)

---

🔚 Penutup:

Dengan Flutter, kamu bisa membuat aplikasi produktivitas yang cantik dan efisien hanya dengan beberapa baris kode. Coba eksplorasi dan kembangkan lagi sesuai gaya kamu!

Semoga tutorial ini bermanfaat, dan selamat berkoding! 🚀