Membuat Aplikasi To Do List Menggunakan Flutter

🚀 Membuat Aplikasi To Do List Menggunakan Flutter

📌 Pendahuluan

Pernah lupa dengan tugas yang harus dikerjakan? Atau memiliki banyak kegiatan tetapi bingung harus mulai dari mana? 🤔

Salah satu solusi sederhana untuk mengatur kegiatan adalah menggunakan To Do List. To Do List merupakan aplikasi yang digunakan untuk mencatat tugas atau kegiatan sehingga pengguna dapat mengetahui pekerjaan yang belum selesai maupun yang sudah selesai.

Pada proyek kali ini, saya membuat Aplikasi To Do List menggunakan Flutter dan bahasa pemrograman Dart. Aplikasi ini dibuat dengan tampilan sederhana agar mudah dipahami dan digunakan.

🎯 Tujuan Pembuatan Aplikasi

Pembuatan aplikasi ini bertujuan untuk mempelajari dasar-dasar pemrograman Flutter dan Dart melalui sebuah proyek sederhana.

Tujuan lainnya yaitu:

- 💻 Mempelajari dasar-dasar Flutter dan Dart.

- 📝 Membuat aplikasi sederhana untuk mencatat tugas.

- 🧩 Memahami penggunaan widget pada Flutter.

- 📋 Membantu pengguna mengatur daftar tugas dengan lebih mudah.

✨ Fitur Aplikasi

Walaupun dibuat sederhana, aplikasi To Do List ini memiliki beberapa fitur yang cukup berguna:

➕ 1. Menambahkan Tugas

Pengguna dapat memasukkan tugas melalui kolom input dan menambahkannya ke dalam daftar.

📋 2. Menampilkan Daftar Tugas

Setiap tugas yang ditambahkan akan ditampilkan pada halaman utama aplikasi.

☑️ 3. Menandai Tugas Selesai

Pengguna dapat mencentang tugas yang sudah selesai. Tugas yang selesai akan ditampilkan dengan tulisan tercoret.

🗑️ 4. Menghapus Tugas

Tugas yang sudah tidak diperlukan dapat dihapus menggunakan tombol tempat sampah.

🛠️ Alat yang Digunakan

Untuk membuat aplikasi ini, beberapa alat yang digunakan adalah:

- Flutter — framework untuk membuat aplikasi.

- Dart — bahasa pemrograman yang digunakan oleh Flutter.

- DartPad — tempat untuk menulis dan menjalankan kode secara online.

- Browser — digunakan untuk membuka DartPad.

- Laptop/Komputer — digunakan untuk proses pembuatan aplikasi.

💻 Coding Aplikasi

Berikut adalah kode sederhana untuk membuat Aplikasi To Do List menggunakan Flutter:

import 'package:flutter/material.dart';

void main() {

  runApp(const MyApp());

}

class MyApp extends StatelessWidget {

  const MyApp({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 TextEditingController controller = TextEditingController();

  List<String> tugas = [];

  List<bool> selesai = [];

  void tambahTugas() {

    if (controller.text.isNotEmpty) {

      setState(() {

        tugas.add(controller.text);

        selesai.add(false);

        controller.clear();

      });

    }

  }

  void hapusTugas(int index) {

    setState(() {

      tugas.removeAt(index);

      selesai.removeAt(index);

    });

  }

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(

        title: const Text('To Do List'),

      ),

      body: Padding(

        padding: const EdgeInsets.all(16),

        child: Column(

          children: [

            Row(

              children: [

                Expanded(

                  child: TextField(

                    controller: controller,

                    decoration: const InputDecoration(

                      hintText: 'Masukkan tugas...',

                      border: OutlineInputBorder(),

                    ),

                  ),

                ),

                const SizedBox(width: 8),

                ElevatedButton(

                  onPressed: tambahTugas,

                  child: const Text('Tambah'),

                ),

              ],

            ),

            const SizedBox(height: 20),

            Expanded(

              child: ListView.builder(

                itemCount: tugas.length,

                itemBuilder: (context, index) {

                  return ListTile(

                    leading: Checkbox(

                      value: selesai[index],

                      onChanged: (value) {

                        setState(() {

                          selesai[index] = value!;

                        });

                      },

                    ),

                    title: Text(

                      tugas[index],

                      style: TextStyle(

                        decoration: selesai[index]

                            ? TextDecoration.lineThrough

                            : TextDecoration.none,

                      ),

                    ),

                    trailing: IconButton(

                      icon: const Icon(Icons.delete),

                      onPressed: () => hapusTugas(index),

                    ),

                  );

                },

              ),

            ),

          ],

        ),

      ),

    );

  }

}

🔍 Penjelasan Singkat Coding

Agar lebih mudah dipahami, berikut fungsi dari beberapa bagian penting pada kode:

📝 TextField

Digunakan sebagai tempat pengguna memasukkan nama atau deskripsi tugas.

➕ Tombol Tambah

Digunakan untuk menambahkan tugas yang telah ditulis ke dalam daftar.

☑️ Checkbox

Digunakan untuk menandai tugas yang sudah selesai.

📋 ListView.builder

Digunakan untuk menampilkan semua tugas dalam bentuk daftar.

🗑️ IconButton

Digunakan untuk menghapus tugas dari daftar.

🔄 setState()

Digunakan untuk memperbarui tampilan aplikasi ketika terjadi perubahan data.

🔄 Cara Kerja Aplikasi

Cara menggunakan aplikasi ini cukup mudah.

1️⃣ Masukkan tugas

Pengguna mengetik tugas pada kolom "Masukkan tugas...".

2️⃣ Tekan tombol Tambah

Setelah tugas ditulis, tekan tombol Tambah.

3️⃣ Tugas muncul di daftar

Tugas yang telah dimasukkan akan muncul pada halaman utama.

4️⃣ Tandai jika sudah selesai

Jika tugas telah selesai dikerjakan, pengguna dapat menekan checkbox.

5️⃣ Hapus tugas

Jika tugas sudah tidak diperlukan, pengguna dapat menekan ikon 🗑️ untuk menghapusnya.

🖥️ Contoh Penggunaan

Misalnya pengguna memiliki beberapa tugas:

«📚 Belajar Dart

💻 Mengerjakan tugas Flutter

📝 Membuat laporan

📤 Mengumpulkan tugas»

Semua tugas tersebut dapat dimasukkan ke dalam aplikasi. Setelah salah satu tugas selesai, pengguna cukup menekan checkbox sehingga tugas tersebut berubah menjadi tugas selesai.

🌟 Kelebihan Aplikasi

Aplikasi To Do List ini memiliki beberapa kelebihan, yaitu:

- Tampilan sederhana dan mudah dipahami.

- Mudah digunakan untuk mencatat tugas.

- Dapat menandai tugas yang sudah selesai.

- Tugas dapat dihapus dengan mudah.

- Cocok digunakan sebagai proyek belajar Flutter untuk pemula.

🚀 Pengembangan Selanjutnya

Aplikasi ini masih dapat dikembangkan agar menjadi lebih lengkap dan menarik.

Beberapa fitur yang dapat ditambahkan adalah:

- 📅 Deadline tugas

- 🔔 Notifikasi pengingat

- 🗂️ Kategori tugas

- 💾 Penyimpanan data

- 🔎 Fitur pencarian

- 🌙 Dark Mode

Dengan menambahkan fitur tersebut, aplikasi To Do List dapat menjadi aplikasi yang lebih bermanfaat untuk mengatur berbagai kegiatan sehari-hari.

🏁 Kesimpulan

Membuat Aplikasi To Do List menggunakan Flutter dan Dart merupakan salah satu cara sederhana untuk belajar pemrograman.

Melalui proyek ini, kita dapat memahami beberapa konsep dasar Flutter seperti penggunaan TextField, Button, Checkbox, ListView, IconButton, dan setState().

Walaupun aplikasi ini masih sederhana, proyek ini dapat menjadi langkah awal untuk membuat aplikasi Flutter yang lebih kompleks dan menarik.

«💙 Belajar coding tidak harus dimulai dari aplikasi yang rumit. Mulailah dari proyek sederhana, pahami setiap bagian kodenya, kemudian kembangkan sedikit demi sedikit!»

🏷️ Tag

#Flutter #Dart #ToDoList #BelajarFlutter #Coding #DartPad #AplikasiMobile #Pemrograman #BelajarCoding