Widget Pada Aplikasi To Do List Sederhana

📱 Membuat Aplikasi To Do List Sederhana dengan Flutter (Background Image)

Pada artikel ini, saya akan membahas cara membuat aplikasi To Do List sederhana menggunakan Flutter, lengkap dengan background image berulang (repeat) serta fitur tambah dan hapus catatan.

Aplikasi ini dibuat menggunakan widget dasar Flutter sehingga cocok untuk pemula yang sedang belajar Flutter.

---

🧩 Fitur Aplikasi

• Menambahkan catatan tugas

• Menghapus catatan

• Menampilkan pesan jika belum ada catatan

• Menggunakan background image (repeat)

• Tampilan sederhana dan rapi

---

📌 Source Code Lengkap

Berikut adalah kode Flutter lengkap yang digunakan pada aplikasi ini:

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
// ===================
// ROOT APLIKASI
// ===================
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'To Do List Sederhana',
      debugShowCheckedModeBanner: false,
      home: TodoPage(),
    );
  }
}
// ===================
// HALAMAN UTAMA
// ===================
class TodoPage extends StatefulWidget {
  @override
  _TodoPageState createState() => _TodoPageState();
}
class _TodoPageState extends State<TodoPage> {
  TextEditingController todoController = TextEditingController();
  List<String> todoList = [];
  void tambahTodo() {
    if (todoController.text.isNotEmpty) {
      setState(() {
        todoList.add(todoController.text);
        todoController.clear();
      });
    }
  }
  void hapusTodo(int index) {
    setState(() {
      todoList.removeAt(index);
    });
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'To Do List - Rizqi & Raffa',
          style: TextStyle(fontWeight: FontWeight.bold),
        ),
      ),
      // ===================
      // BACKGROUND IMAGE (REPEAT)
      // ===================
      body: Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage('lib/assets/bg.jpg'),
            repeat: ImageRepeat.repeat,
            fit: BoxFit.none,
            scale: 1.5, // ubah ini kalau mau lebih kecil / besar
          ),
        ),
        // overlay biar teks kebaca
        child: Container(
          color: Colors.black.withOpacity(0.35),
          child: Padding(
            padding: EdgeInsets.all(16),
            child: Column(
              children: [
                // ===================
                // INPUT + BUTTON
                // ===================
                Row(
                  children: [
                    Expanded(
                      child: TextField(
                        controller: todoController,
                        decoration: InputDecoration(
                          hintText: 'Masukkan tugas bro...',
                          filled: true,
                          fillColor: Color.fromARGB(255, 0, 252, 8),
                          border: OutlineInputBorder(),
                        ),
                      ),
                    ),
                    SizedBox(width: 10),
                    ElevatedButton(
                      onPressed: tambahTodo,
                      child: Text('Tambah'),
                    ),
                  ],
                ),
                SizedBox(height: 10),
                // ===================
                // LIST TODO
                // ===================
                Expanded(
                  child: todoList.isEmpty
                      ? Center(
                          child: Text(
                            'Belum ada catatan',
                            style: TextStyle(
                              color: Colors.white,
                              fontSize: 16,
                            ),
                          ),
                        )
                      : ListView.builder(
                          itemCount: todoList.length,
                          itemBuilder: (context, index) {
                            return Card(
                              child: ListTile(
                                title: Text(todoList[index]),
                                trailing: IconButton(
                                  icon: Icon(
                                    Icons.delete,
                                    color: Color.fromARGB(255, 0, 0, 0),
                                  ),
                                  onPressed: () => hapusTodo(index),
                                ),
                              ),
                            );
                          },
                        ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

---

🧠 Penjelasan Widget Utama

🔹 MaterialApp

Widget utama yang menjadi dasar aplikasi Flutter.

• Mengatur tema

• Menentukan halaman awal (home)

• Menonaktifkan banner debug

---

🔹 Scaffold

Digunakan sebagai kerangka halaman aplikasi.
Di dalamnya terdapat:

• AppBar

• Body

---

🔹 AppBar

Menampilkan judul aplikasi di bagian atas layar.

appBar: AppBar(
  title: Text('To Do List - Rizqi & Raffa'),
),

---

🔹 Container

Digunakan untuk:

• Menampilkan background image

• Memberi warna overlay transparan agar teks tetap terbaca

decoration: BoxDecoration(
  image: DecorationImage(
    image: AssetImage('lib/assets/bg.jpg'),
    repeat: ImageRepeat.repeat,
  ),
),

---

🔹 Column

Mengatur widget secara vertikal, seperti:

• Input tugas

• Tombol tambah

• List To Do

---

🔹 Row

Digunakan untuk menampilkan:

• TextField

• ElevatedButton
  dalam satu baris.

---

🔹 TextField

Digunakan untuk input teks tugas.
Data diambil menggunakan TextEditingController.

---

🔹 ElevatedButton

Tombol Tambah yang berfungsi untuk menyimpan tugas ke dalam list.

---

🔹 ListView.builder

Menampilkan daftar tugas secara dinamis sesuai jumlah data pada todoList.

---

🔹 setState()

Digunakan untuk memperbarui tampilan UI setiap kali:

• Menambah todo

• Menghapus todo

🔹 Background-image

Digunakan untuk menampilkan gambar di background aplikasi:

• Menambah photo

• Memperbagus tampilan aplikasi

       Jangan lupa untuk menambahkan ini di bagian pubspec.yaml:

          assets:

                - assets/bg.jpg

---

✅ Kesimpulan

Dengan menggunakan widget dasar Flutter seperti Scaffold, Container, Row, Column, dan ListView, kita sudah bisa membuat aplikasi To Do List sederhana namun fungsional. Aplikasi ini bisa dikembangkan lebih lanjut dengan fitur:

• Checklist selesai

• Penyimpanan lokal

• Animasi