Ikmal XI RPL 1

 

📌 Membuat Aplikasi To-Do List Sederhana dengan Flutter 

Halo teman-teman! 👋

Pada artikel kali ini, kita akan belajar membuat aplikasi To-Do List sederhana menggunakan Flutter dan bahasa Dart.

Kenapa To-Do List? Karena aplikasi ini sederhana, tetapi sangat bermanfaat untuk melatih kita memahami konsep dasar Flutter, seperti:

Cara membuat StatefulWidget

Menggunakan setState() untuk memperbarui UI

Menghubungkan data dengan tampilan aplikasi (UI)

🎯 Fitur Aplikasi 

Aplikasi To-Do List yang kita buat memiliki 3 fitur utama:

Tambah tugas ➕ → user bisa menambahkan tugas baru ke daftar.

Centang tugas ✅ → user bisa menandai apakah tugas sudah selesai atau belum.

Hapus tugas ❌ → user bisa menghapus tugas dari daftar.

Dengan fitur sederhana ini, kita sudah bisa membuat aplikasi yang fungsional.

🛠️ Kode Program Lengkap 

Berikut adalah kode lengkap untuk aplikasi To-Do List:

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',

      debugShowCheckedModeBanner: false,

      theme: ThemeData(primarySwatch: Colors.blue),

      home: const ToDoListPage(),

    );

  }

}

class ToDoListPage extends StatefulWidget {

  const ToDoListPage({super.key});

  @override

  State<ToDoListPage> createState() => _ToDoListPageState();

}

class _ToDoListPageState extends State<ToDoListPage> {

  final List<Map<String, dynamic>> _tasks = [];

  final TextEditingController _controller = TextEditingController();

  // Tambah tugas

  void _addTask() {

    if (_controller.text.isNotEmpty) {

      setState(() {

        _tasks.add({"title": _controller.text, "done": false});

        _controller.clear();

      });

    }

  }

  // Centang selesai

  void _toggleDone(int index) {

    setState(() {

      _tasks[index]["done"] = !_tasks[index]["done"];

    });

  }

  // Hapus tugas

  void _deleteTask(int index) {

    setState(() {

      _tasks.removeAt(index);

    });

  }

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(title: const Text("To-Do List")),

      body: Column(

        children: [

          Padding(

            padding: const EdgeInsets.all(8),

            child: Row(

              children: [

                Expanded(

                  child: TextField(

                    controller: _controller,

                    decoration: const InputDecoration(

                      hintText: "Tambahkan tugas...",

                      border: OutlineInputBorder(),

                    ),

                  ),

                ),

                const SizedBox(width: 8),

                ElevatedButton(

                  onPressed: _addTask,

                  child: const Text("Tambah"),

                ),

              ],

            ),

          ),

          Expanded(

            child: ListView.builder(

              itemCount: _tasks.length,

              itemBuilder: (context, index) {

                return ListTile(

                  leading: Checkbox(

                    value: _tasks[index]["done"],

                    onChanged: (_) => _toggleDone(index),

                  ),

                  title: Text(

                    _tasks[index]["title"],

                    style: TextStyle(

                      decoration: _tasks[index]["done"]

                          ? TextDecoration.lineThrough

                          : TextDecoration.none,

                    ),

                  ),

                  trailing: IconButton(

                    icon: const Icon(Icons.delete, color: Colors.red),

                    onPressed: () => _deleteTask(index),

                  ),

                );

              },

            ),

          ),

        ],

      ),

    );

  }

}

📖 Penjelasan Kode 

Mari kita bahas bagian penting dari kode di atas:

1. Fungsi main() 

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

👉 Ini adalah entry point aplikasi Flutter. Fungsi ini menjalankan widget utama ToDoApp.

2. ToDoApp (StatelessWidget) 

class ToDoApp extends StatelessWidget { const ToDoApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( title: 'To-Do List', debugShowCheckedModeBanner: false, theme: ThemeData(primarySwatch: Colors.blue), home: const ToDoListPage(), ); } } 

👉 Widget ini adalah kerangka utama aplikasi. Kita menggunakan MaterialApp untuk mendesain aplikasi berbasis Material Design.

3. ToDoListPage (StatefulWidget) 

class ToDoListPage extends StatefulWidget { const ToDoListPage({super.key}); @override State<ToDoListPage> createState() => _ToDoListPageState(); } 

👉 Karena daftar tugas bisa berubah-ubah (dinamis), kita menggunakan StatefulWidget.

4. Variabel State 

final List<Map<String, dynamic>> _tasks = []; final TextEditingController _controller = TextEditingController(); 

_tasks → menyimpan daftar tugas dalam bentuk list.

_controller → mengontrol input dari TextField.

5. Fitur Tambah, Centang, dan Hapus 

Tambah tugas

void _addTask() { if (_controller.text.isNotEmpty) { setState(() { _tasks.add({"title": _controller.text, "done": false}); _controller.clear(); }); } } 

Centang tugas

void _toggleDone(int index) { setState(() { _tasks[index]["done"] = !_tasks[index]["done"]; }); } 

Hapus tugas

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

6. Tampilan UI 

•TextField → tempat user menulis tugas baru.

•ElevatedButton → tombol untuk menambah tugas.

•ListView.builder → menampilkan daftar tugas.

•Checkbox → menandai tugas sudah selesai.

•IconButton → menghapus tugas.

💡 Kesimpulan 

Dengan membuat aplikasi To-Do List ini, kita belajar:

✅ Menggunakan StatefulWidget untuk membuat UI yang dinamis

✅ Memahami fungsi setState() agar tampilan selalu ter-update

✅ Menyimpan data sederhana dengan list

✅ Menghubungkan input user dengan daftar tugas

Aplikasi ini memang sederhana, tapi sangat penting untuk pemula. Selanjutnya, kamu bisa mengembangkan aplikasi ini dengan:

•Menyimpan data ke database lokal (SQLite/Hive)

•Menambahkan deadline atau prioritas tugas

•Menggunakan state management seperti Provider, Riverpod, atau GetX

Teman non jurusan:

Nama: APEY HN

JURUSAN: XI MPLB 1