CHALLENGE FLUTTER FAUZI XI RPL 1
⚡ Challenge Flutter - Analisis Program main.dart
Praktikum Pemrograman Mobile
🔍 TUGAS 1 – MENGAMATI PROGRAM
1. Judul aplikasi yang tampil:
➡️ "Flutter Demo Home Page" (sebelum modifikasi)
2. Nilai awal yang ditampilkan:
➡️ 0
3. Yang terjadi ketika tombol "+" ditekan:
➡️ Angka bertambah 1 setiap kali ditekan.
4. Berapa kali nilai bertambah setiap tombol ditekan:
➡️ 1 kali per tekanan.
🧩 TUGAS 2 – ANALISIS KODE
| Kode | Fungsi |
|---|---|
| main() | Titik masuk utama program, menjalankan aplikasi. |
| runApp() | Merender widget root dan memulai aplikasi Flutter. |
| MaterialApp | Widget pembungkus yang menyediakan tema dan navigasi ala Material Design. |
| Scaffold | Struktur dasar halaman (AppBar, body, FAB, dll). |
| AppBar | Bilah atas yang menampilkan judul aplikasi. |
| Text | Menampilkan teks di layar. |
| FloatingActionButton | Tombol aksi mengambang (biasanya untuk aksi utama). |
| setState() | Memberi tahu framework bahwa state berubah, sehingga UI diperbarui. |
🔄 TUGAS 3 – ANALISIS ALUR PROGRAM
Diagram urutan kerja program:
🛠️ TUGAS 4 – MODIFIKASI PROGRAM
✅ Modifikasi 1 – Ubah Judul Aplikasi
Judul diubah menjadi "Absensi Siswa" pada properti title di AppBar.
title: Text('Absensi Siswa'),
),
✅ Modifikasi 2 – Ubah Ukuran Teks Menjadi 40
'$_counter',
style: TextStyle(fontSize: 40),
),
✅ Modifikasi 3 – Ubah Ikon Tombol
Ganti Icons.add menjadi Icons.school.
onPressed: _incrementCounter,
child: Icon(Icons.school),
),
✅ Modifikasi 4 – Tambahkan Nama di Tampilan
Menambahkan teks "Nama : Budi" di atas jumlah.
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Nama : Budi'),
Text('Jumlah : $_counter'),
],
),
),
🚀 TUGAS 5 – CHALLENGE MANDIRI (Tombol Reset)
Menambahkan tombol reset yang mengembalikan nilai ke 0.
Langkah-langkah:
- Buat fungsi
resetData()yang memanggilsetState()dan mengubah_counter = 0. - Tambahkan tombol FloatingActionButton kedua (atau gunakan tombol lain) yang memanggil fungsi tersebut.
setState(() {
_counter = 0;
});
}
// Di dalam Scaffold, tambahkan FAB kedua
floatingActionButton: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
FloatingActionButton(
onPressed: _incrementCounter,
child: Icon(Icons.school),
),
SizedBox(height: 10),
FloatingActionButton(
onPressed: resetData,
child: Icon(Icons.refresh),
),
],
),
Catatan: Gunakan ikon refresh atau teks "Reset".
🧠 REFLEKSI
1. Fungsi StatefulWidget:
Widget yang dapat berubah-ubah (memiliki state) selama aplikasi berjalan, seperti counter yang nilainya berubah.
2. Mengapa program menggunakan setState():
Karena setiap perubahan data harus memberi tahu Flutter agar UI di-rebuild dengan data terbaru.
3. Jika setState() tidak digunakan:
Tampilan tidak akan berubah meskipun nilai variabel sudah di-update, sehingga pengguna tidak melihat perubahan.
4. Widget yang paling sering digunakan:
Text, Scaffold, AppBar, FloatingActionButton, dan Center.
5. Kesulitan selama praktikum:
(Contoh) Memahami perbedaan Stateful dan Stateless widget, serta penempatan sintaks yang tepat.
📌 KESIMPULAN
Praktikum ini mengajarkan struktur dasar Flutter, cara kerja StatefulWidget, dan pentingnya setState(). Dengan modifikasi sederhana, aplikasi counter dapat diubah menjadi aplikasi "Absensi Siswa" yang lebih relevan. Challenge reset semakin memperdalam pemahaman tentang pengelolaan state dan interaksi pengguna.
Komentar
Posting Komentar