membuat aplikasi to-do list sederhana dengan flutter

 

💻 Membuat Aplikasi To-Do List Sederhana dengan Flutter

🗓️ Hari/Tanggal

Jumat, 10 Oktober 2025

👨‍💻 Nama

(Desta Adila Kusuma) – Kelas XI PPLG 1

---

🔹 Pendahuluan

Hari ini kami belajar mandiri dengan materi “Mengenal Lebih Dalam Widget Flutter”.
Flutter adalah framework yang digunakan untuk membuat aplikasi mobile, web, dan desktop menggunakan bahasa Dart.
Tugas kali ini adalah membuat aplikasi To-Do List sederhana, yaitu aplikasi untuk mencatat daftar kegiatan atau tugas harian.

---

🔹 Tujuan Pembelajaran

• Memahami dasar penggunaan widget di Flutter

• Mampu membuat aplikasi sederhana dengan logika penambahan dan penghapusan data

• Melatih kemandirian dalam belajar dan eksplorasi kode

---

🔹 Langkah-Langkah

1️⃣ Buka situs https://dartpad.dev
2️⃣ Salin kode berikut ke editor DartPad:

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(
        primarySwatch: Colors.blue,
      ),
      home: const ToDoPage(),
    );
  }
}

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

  @override
  State<ToDoPage> createState() => _ToDoPageState();
}

class _ToDoPageState extends State<ToDoPage> {
  final List<String> _tasks = [];
  final TextEditingController _controller = TextEditingController();

  void _addTask() {
    String text = _controller.text.trim();
    if (text.isNotEmpty) {
      setState(() {
        _tasks.add(text);
      });
      _controller.clear();
    }
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('To-Do List Sederhana 📝'),
        centerTitle: true,
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            Row(
              children: [
                Expanded(
                  child: TextField(
                    controller: _controller,
                    decoration: const InputDecoration(
                      hintText: 'Tambahkan tugas baru...',
                      border: OutlineInputBorder(),
                    ),
                  ),
                ),
                const SizedBox(width: 8),
                ElevatedButton(
                  onPressed: _addTask,
                  child: const Text('Tambah'),
                ),
              ],
            ),
            const SizedBox(height: 16),
            Expanded(
              child: _tasks.isEmpty
                  ? const Center(child: Text('Belum ada tugas 😄'))
                  : ListView.builder(
                      itemCount: _tasks.length,
                      itemBuilder: (context, index) {
                        return Card(
                          child: ListTile(
                            title: Text(_tasks[index]),
                            trailing: IconButton(
                              icon: const Icon(Icons.delete, color: Colors.red),
                              onPressed: () => _removeTask(index),
                            ),
                          ),
                        );
                      },
                    ),
            ),
          ],
        ),
      ),
    );
  }
}

3️⃣ Tekan tombol Run ▶️
4️⃣ Tambahkan beberapa tugas, lalu hapus salah satunya untuk mencoba fitur delete

---

🔹 Hasil Tampilan

📸 

---

🔹 Kesimpulan

Dari percobaan ini, saya belajar bahwa Flutter memiliki banyak widget yang mudah digunakan untuk membuat aplikasi interaktif.
Dengan hanya beberapa baris kode, kita sudah bisa membuat aplikasi To-Do List sederhana yang berfungsi dengan baik.

Belajar mandiri membuat saya jadi lebih berani mencoba dan tidak takut salah — karena error adalah guru terbaik! 💪

---

🔹 Tagar

#NgodingAsik #Flutter #PPLG1 #BelajarMandiri #ToDoListApp