UI Dasar Aplikasi Flutter – Catatan / To-Do App

Gass Belajar Lagi, hari ini pas banget untuk satu pertemuan efektif 👍

Semoga anak RPL/PPLG paham alur widget + alur berpikir, bukan copy-paste doang.

---

📱 Proyek Hari Ini

UI Dasar Aplikasi Flutter – Catatan / To-Do App

🎯 Tujuan Pembelajaran

Setelah kegiatan hari ini, siswa mampu:

1. Menjelaskan fungsi widget utama Flutter

2. Menyusun UI sederhana secara bertahap

3. Memahami alur widget dari atas ke bawah

4. Membuat tampilan To-Do App sederhana

---

🧠 Mindset yang Ditanamkan ke Siswa (PENTING)

“Hari ini bukan ngejar aplikasi jadi,
tapi paham alur UI Flutter.”

Kalau UI masih sederhana → tidak apa-apa
Yang penting: mengerti kenapa widget itu dipakai

---

🗺️ Gambaran Tampilan Akhir (yang dibayangkan siswa)

📱 Halaman utama aplikasi:

• AppBar judul di atas

• Input teks + tombol “Tambah”

• Daftar catatan di bawah

• Bisa tambah & hapus data

(Realistis, sederhana, tapi fungsional)

---

🧩 Alur Widget (Dari Besar ke Kecil)

Jelaskan ke siswa pakai pola “bungkus ke isi”:

MaterialApp
 └── Scaffold
      ├── AppBar
      └── Body
           └── Padding
                └── Column
                     ├── Row (Input + Tombol)
                     ├── Spasi
                     └── List (To-Do)

📌 Kalimat kunci untuk siswa:

Flutter itu menyusun tampilan dari luar ke dalam
dari besar → kecil

---

⏱️ Alur Kegiatan Belajar (Step by Step)

🟢 1. Pembukaan (±10 menit)

Guru menyampaikan:

• Apa itu Flutter UI

• Contoh aplikasi To-Do

• Target hari ini (tidak perfeksionis)

💬 Kalimat ke siswa:

“Hari ini kita belajar menyusun UI, bukan desain cantik”

---

🟢 2. Bangun Kerangka Aplikasi (±20 menit)

Mulai dari:

• main()

• MaterialApp

• Scaffold

• AppBar

📌 Fokus pemahaman:

• Kenapa harus ada MaterialApp

• Fungsi Scaffold

• AppBar itu bagian dari Scaffold

❗ Belum input, belum list
➡️ Biar siswa ngerti fondasi dulu

---

🟢 3. Isi Body: Column + Padding (±20 menit)

Tambahkan:

• Padding

• Column

Diskusi:

• Kenapa pakai Column, bukan Row

• Urutan widget itu penting

📌 Target siswa:

“Oh… ternyata tampilan disusun urut ke bawah”

---

🟢 4. Input + Tombol (±30 menit)

Tambahkan:

• Row

• TextField

• ElevatedButton

• Expanded

Latihan berpikir:

• Kenapa input lebih panjang?

• Kenapa tombol tidak melebar?

📌 Insight penting:

Expanded itu mengatur pembagian ruang

---

🟢 5. List To-Do (±30 menit)

Tambahkan:

• ListView.builder

• Card

• ListTile

• IconButton

Tekankan:

• List ini dinamis

• Data diambil dari List<String>

📌 Bukan hafalan, tapi:

“ListView.builder = pembuat daftar otomatis”

---

🟢 6. Refleksi & Diskusi (±10 menit)

Tanya siswa:

• Widget paling luar apa?

• Kalau mau nambah tombol, di mana?

• Kalau error UI, cek bagian mana dulu?

---

📦 Output Hari Ini (Realistis & Aman)

✔️ Aplikasi sudah tampil halaman utama
✔️ Ada AppBar, input, tombol, dan list
✔️ UI sederhana (tidak masalah)
✔️ Siswa paham alur widget
✔️ Bukan hasil copy-paste

---

📝 Tugas Ringan (Opsional)

Pilih salah satu:

1. Ganti judul AppBar

2. Ganti warna tombol

3. Tambah teks “Belum ada catatan”

4. Jelaskan alur widget dengan kata sendiri

---

🎯 Kalimat Penutup ke Siswa

“Kalau kamu sudah paham alurnya,
besok mau bikin aplikasi apa pun
tinggal ganti isinya.”

---

👍 ini kodingan LENGKAP, SIAP RUN, sesuai dengan target UI dasar + mudah dipahami siswa.
Cocok langsung dipakai di kelas hari ini.

📱 Koding Lengkap

UI Dasar Flutter – To-Do / Catatan App
=============================================================

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> {
  // Controller untuk mengambil teks dari TextField
  TextEditingController todoController = TextEditingController();
  // List untuk menyimpan data catatan
  List<String> todoList = [];
  // Fungsi menambah data
  void tambahTodo() {
    if (todoController.text.isNotEmpty) {
      setState(() {
        todoList.add(todoController.text);
        todoController.clear();
      });
    }
  }
  // Fungsi menghapus data
  void hapusTodo(int index) {
    setState(() {
      todoList.removeAt(index);
    });
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // ===================
      // APP BAR
      // ===================
      appBar: AppBar(
        title: Text(
          'To Do List - Darsu',
          style: TextStyle(fontWeight: FontWeight.bold),
        ),
        centerTitle: true,
      ),
      // ===================
      // BODY
      // ===================
      body: Padding(
        padding: EdgeInsets.all(16),
        child: Column(
          children: [
            // ===================
            // INPUT + TOMBOL
            // ===================
            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),
            // ===================
            // LIST TO DO
            // ===================
            Expanded(
              child: todoList.isEmpty
                  ? Center(
                      child: Text(
                        'Belum ada catatan',
                        style: TextStyle(color: Colors.grey),
                      ),
                    )
                  : 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),
                            ),
                          ),
                        );
                      },
                    ),
            ),
          ],
        ),
      ),
    );
  }
}

🧠 Catatan Penting 

• MaterialApp → pembungkus aplikasi
• Scaffold → kerangka halaman
• Column → susun ke bawah
• Row → susun ke samping
• TextField → input data
• ListView.builder → list dinamis
• setState() → memberi tahu UI bahwa data berubah

🎯 Status Proyek Hari Ini

✅ Aplikasi bisa dijalankan

✅ UI utama tampil

✅ Input & list berfungsi

✅ Siswa paham alur widget

Bukan cuma “jadi”, tapi mengerti 👌

✅ Upgrade level berikutnya (checkbox + status selesai)