To do List

https://zmhu068enhv0.zapp.page/#/

Belajar Flutter: Membuat Aplikasi To-Do List

Pendahuluan

Flutter adalah framework modern untuk membuat aplikasi mobile dan web. Pada tutorial ini, kita akan membuat aplikasi To-Do List dengan UI formal dan bersih. Aplikasi ini memungkinkan pengguna menambah, mengedit, menghapus, dan menandai tugas selesai.

Kode Flutter Dasar

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,
      home: const TodoPage(),
    );
  }
}

Penjelasan Widget

• MaterialApp: Titik awal aplikasi, mengatur tema, routing, dan halaman utama.
• debugShowCheckedModeBanner: Menghilangkan banner debug di kanan atas.
• home: Menentukan halaman utama TodoPage().

StatefulWidget untuk UI Dinamis

Kita menggunakan StatefulWidget karena daftar tugas akan berubah ketika pengguna menambah, menghapus, atau menandai selesai.

class TodoPage extends StatefulWidget {
  const TodoPage({super.key});

  @override
  State<TodoPage> createState() => _TodoPageState();
}

Menyimpan Data Tugas

final TextEditingController _controller = TextEditingController();
final List<String> _tasks = [];
final List<bool> _completed = [];

• TextEditingController: Mengontrol input dari TextField.
• _tasks: Menyimpan daftar tugas.
• _completed: Menyimpan status selesai setiap tugas.

Fungsi Utama

• _addTask(): Menambahkan tugas baru.
• _editTask(): Memunculkan dialog untuk mengubah tugas.
• _toggleCompleted(): Menandai tugas selesai.
• _deleteTask(): Menghapus tugas.

Membuat UI dengan Flutter Widgets

Scaffold(
  appBar: AppBar(...),
  body: Container(
    color: Color.fromARGB(255, 240, 222, 162),
    child: Padding(
      padding: const EdgeInsets.all(16),
      child: Column(
        children: [
          Row(
            children: [
              Expanded(child: TextField(...)),
              IconButton(...),
            ],
          ),
          Expanded(child: ListView.builder(...)),
        ],
      ),
    ),
  ),
);

Penjelasan Widget

• Scaffold: Struktur dasar aplikasi, termasuk AppBar dan body.
• AppBar: Bar atas dengan judul dan warna tema.
• Container: Memberi background warna.
• Padding: Memberi jarak antar widget.
• Column & Row: Mengatur widget vertikal & horizontal.
• Expanded: Membuat widget mengisi ruang tersedia.
• TextField: Input teks untuk tugas baru.
• IconButton: Tombol interaktif (tambah, edit, hapus, checklist).
• ListView.builder: Menampilkan daftar tugas secara scrollable.
• Card + ListTile: Membuat tampilan rapi untuk setiap item tugas.

Kesimpulan

Dengan Flutter, kita bisa membuat aplikasi To-Do List interaktif dengan UI formal dan bersih. Pengetahuan ini dapat dikembangkan untuk aplikasi yang lebih kompleks dengan tema dan fitur tambahan.