Todo list App - Dhanis

📱 Flutter To-Do List Sederhana

Tutorial Flutter pemula: kode lengkap, penjelasan detail tiap bagian, dan preview langsung via Zapp.run

📌 Navigasi Cepat

• 📦 Kode Flutter Lengkap
• 🚀 Fungsi main()
• 🧩 MyApp & MaterialApp
• 🔄 StatefulWidget & State
• ⌨️ Input & Tombol
• 🖼️ Stack & Background
• 📋 ListView & Delete
• 🌐 Preview Aplikasi

📦 Kode Flutter Lengkap

Berikut adalah kode Flutter lengkap yang digunakan pada aplikasi To-Do List ini. Kamu bisa langsung menyalinnya dan menjalankan di Zapp.run tanpa instalasi apa pun.

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,
      theme: ThemeData(
        scaffoldBackgroundColor: Colors.white,
      ),
      home: TodoPage(),
    );
  }
}

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

class _TodoPageState extends State {
  TextEditingController todoController = TextEditingController();
  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 - Darsu'),
        centerTitle: true,
      ),
      body: Padding(
        padding: EdgeInsets.all(16),
        child: Column(
          children: [
            Row(
              children: [
                Expanded(
                  child: TextField(
                    controller: todoController,
                    decoration: InputDecoration(
                      hintText: 'Masukkan tugas...',
                      border: OutlineInputBorder(),
                    ),
                  ),
                ),
                SizedBox(width: 10),
                ElevatedButton(
                  onPressed: tambahTodo,
                  child: Text('Tambah'),
                ),
              ],
            ),
            SizedBox(height: 20),
            Expanded(
              child: Stack(
                children: [
                  Center(
                    child: Opacity(
                      opacity: 0.6,
                      child: Image.network(
                        'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQJZuRDwJwhvi31i3QDYQDg6koDWeSdJyvbJuEDOorLGg&s',
                        width: 150,
                      ),
                    ),
                  ),
                  if (todoList.isNotEmpty)
                    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),
                            ),
                          ),
                        );
                      },
                    ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}
    

🚀 Fungsi main()

Fungsi main() adalah titik awal eksekusi aplikasi Flutter. Di sinilah Flutter diberi tahu widget apa yang pertama kali dijalankan menggunakan runApp().

🧩 MyApp & MaterialApp

MyApp berperan sebagai root widget. MaterialApp digunakan agar aplikasi mengikuti standar Material Design seperti AppBar, Button, dan Theme.

Properti home menentukan halaman pertama yang muncul, yaitu TodoPage.

🔄 StatefulWidget & State

TodoPage dibuat sebagai StatefulWidget karena isi daftar tugas bisa berubah ketika pengguna menambah atau menghapus data.

Fungsi setState() memberi tahu Flutter bahwa UI perlu diperbarui.

⌨️ Input & Tombol

TextEditingController digunakan untuk mengambil teks dari input. Tombol Tambah akan memanggil fungsi tambahTodo().

🖼️ Stack & Background

Stack memungkinkan gambar tetap berada di background. Saat list kosong, gambar terlihat. Saat ada data, list tampil di atasnya.

📋 ListView & Delete

ListView.builder digunakan agar daftar efisien dan dinamis. Tombol delete memanggil hapusTodo() berdasarkan index data.

🌐 Preview Aplikasi

Klik link berikut untuk melihat aplikasi berjalan langsung di browser:

👉 Buka Preview Zapp.run