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:
-
Menjelaskan fungsi widget utama Flutter
-
Menyusun UI sederhana secara bertahap
-
Memahami alur widget dari atas ke bawah
-
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:
(Realistis, sederhana, tapi fungsional)
🧩 Alur Widget (Dari Besar ke Kecil)
Jelaskan ke siswa pakai pola “bungkus ke isi”:
📌 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:
💬 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:
❗ Belum input, belum list
➡️ Biar siswa ngerti fondasi dulu
🟢 3. Isi Body: Column + Padding (±20 menit)
Tambahkan:
Diskusi:
📌 Target siswa:
“Oh… ternyata tampilan disusun urut ke bawah”
🟢 4. Input + Tombol (±30 menit)
Tambahkan:
-
Row
-
TextField
-
ElevatedButton
-
Expanded
Latihan berpikir:
📌 Insight penting:
Expanded itu mengatur pembagian ruang
🟢 5. List To-Do (±30 menit)
Tambahkan:
-
ListView.builder
-
Card
-
ListTile
-
IconButton
Tekankan:
📌 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:
-
Ganti judul AppBar
-
Ganti warna tombol
-
Tambah teks “Belum ada catatan”
-
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)
