Flutter To Do List App

📸 Tampilan Akhir Aplikasi

Contoh hasil UI setelah aplikasi dijalankan:

Tampilan To Do List Flutter dengan background image

🧠 Penjelasan Widget Penting

1. main()

Fungsi main() adalah entry point aplikasi Flutter. runApp() digunakan untuk menjalankan widget utama.

2. MaterialApp

MaterialApp berfungsi sebagai kerangka aplikasi:

• Menentukan halaman utama
• Mengatur tema dan navigasi
• Menonaktifkan debug banner

3. StatefulWidget (TodoPage)

Digunakan karena data To Do bersifat dinamis (tambah dan hapus item).

4. TextEditingController

Mengambil dan mengontrol teks input dari TextField.

5. setState()

Digunakan agar UI langsung diperbarui setiap kali data berubah.

6. Background Image

Background dibuat dengan Container + DecorationImage menggunakan gambar HD dari Picsum.

7. ListView.builder

Menampilkan daftar To Do secara efisien dan scalable.

📦 Full Source Code Flutter

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'To Do List Sederhana',
      debugShowCheckedModeBanner: false,
      home: TodoPage(),
    );
  }
}

class TodoPage extends StatefulWidget {
  @override
  _TodoPageState createState() => _TodoPageState();
}

class _TodoPageState extends State {
  final TextEditingController todoController = TextEditingController();
  final List 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 - Zaky'),
        centerTitle: true,
        backgroundColor: Colors.deepPurple,
      ),
      body: Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: NetworkImage('https://picsum.photos/2560/1440'),
            fit: BoxFit.cover,
          ),
        ),
        child: Container(
          color: Colors.white.withOpacity(0.85),
          child: Padding(
            padding: EdgeInsets.all(16),
            child: Column(
              children: [
                Row(
                  children: [
                    Expanded(
                      child: TextField(
                        controller: todoController,
                        decoration: InputDecoration(
                          hintText: 'Masukkan tugas...',
                          filled: true,
                          fillColor: Colors.white,
                        ),
                      ),
                    ),
                    SizedBox(width: 10),
                    ElevatedButton(
                      onPressed: tambahTodo,
                      child: Text('Tambah'),
                    ),
                  ],
                ),
                SizedBox(height: 20),
                Expanded(
                  child: ListView.builder(
                    itemCount: todoList.length,
                    itemBuilder: (context, index) {
                      return Card(
                        child: ListTile(
                          title: Text(todoList[index]),
                          trailing: IconButton(
                            icon: Icon(Icons.delete, color: Colors.red),
                            onPressed: () => hapusTodo(index),
                          ),
                        ),
                      );

                    },
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

🎨 Color-full UI • 📱 Beginner Friendly • 🚀 Siap dikembangkan