CHALLENGE FLUTTER: MENGANALISIS DAN MEMODIFIKASI PROGRAM MAIN.DART
Mata Pelajaran: Pemrograman Mobile
Kelas: XI PPLG
Media Praktikum: DartPad Flutter
Tujuan Pembelajaran
Setelah menyelesaikan praktikum ini, peserta didik mampu:
Mengidentifikasi struktur dasar program Flutter.
Menjelaskan fungsi widget yang digunakan.
Menganalisis alur kerja aplikasi Flutter.
Melakukan modifikasi sederhana pada kode program.
Mendokumentasikan hasil pembelajaran dalam bentuk artikel blog.
Persiapan
Buka browser.
Kunjungi https://dartpad.dev/flutter
Pilih template Flutter.
Hapus kode bawaan.
Salin kode yang diberikan oleh guru.
Klik Run untuk menjalankan aplikasi.
TUGAS 1 - MENGAMATI PROGRAM
Jalankan aplikasi dan amati hasilnya.
Jawablah pertanyaan berikut:
Apa judul aplikasi yang tampil?
Berapa nilai awal yang ditampilkan?
Apa yang terjadi ketika tombol "+" ditekan?
Berapa kali nilai bertambah setiap tombol ditekan?
TUGAS 2 - ANALISIS KODE
Lengkapi tabel berikut.
| Kode | Fungsi |
|---|---|
| main() | ........ |
| runApp() | ........ |
| MaterialApp | ........ |
| Scaffold | ........ |
| AppBar | ........ |
| Text | ........ |
| FloatingActionButton | ........ |
| setState() | ........ |
TUGAS 3 - ANALISIS ALUR PROGRAM
Jelaskan urutan kerja program berikut.
Program dijalankan.
Widget pertama yang muncul.
Tombol ditekan.
Function yang dipanggil.
Data berubah.
Tampilan diperbarui.
Buat dalam bentuk diagram panah.
Contoh:
Program dijalankan
↓
runApp()
↓
MyApp
↓
HomePage
↓
Tombol "+"
↓
tambahData()
↓
setState()
↓
Tampilan berubah
TUGAS 4 - MODIFIKASI PROGRAM
Lakukan perubahan berikut.
Modifikasi 1
Ubah judul aplikasi menjadi:
"Absensi Siswa"
Screenshot hasilnya.
Modifikasi 2
Ubah ukuran teks menjadi 40.
Screenshot hasilnya.
Modifikasi 3
Ubah ikon tombol dari:
Icons.add
menjadi:
Icons.school
Screenshot hasilnya.
Modifikasi 4
Tambahkan nama kalian pada tampilan aplikasi.
Contoh:
Nama : Budi
Jumlah : 0
Screenshot hasilnya.
TUGAS 5 - CHALLENGE MANDIRI
Tambahkan tombol Reset.
Ketika tombol Reset ditekan, nilai kembali menjadi 0.
Petunjuk:
Buat function
resetData().Isi function dengan
setState().Ubah nilai
jumlahmenjadi 0.Tambahkan tombol baru.
REFLEKSI
Jawablah pertanyaan berikut:
Apa fungsi StatefulWidget?
Mengapa program menggunakan setState()?
Apa yang terjadi jika setState() tidak digunakan?
Widget apa yang paling sering digunakan pada program ini?
Apa kesulitan yang Anda temukan selama praktikum?
PUBLIKASI HASIL PRAKTIKUM
Setelah praktikum selesai, setiap peserta didik WAJIB membuat artikel blog yang berisi:
Isi Artikel Blog
Judul Praktikum.
Nama lengkap.
Kelas.
Nomor Absen.
Hasil pengamatan Tugas 1.
Jawaban Analisis Kode (Tugas 2).
Diagram Alur Program (Tugas 3).
Screenshot hasil Modifikasi Program (Tugas 4).
Penjelasan Challenge Mandiri (Tugas 5).
Refleksi pembelajaran.
Kesimpulan.
Judul Artikel Blog
Challenge Flutter - Analisis Program main.dart
atau
Praktikum Flutter: Analisis dan Modifikasi Program Counter App
PENGUMPULAN TUGAS
Setelah artikel blog dipublikasikan:
Salin (Copy) link artikel blog.
Tempelkan link artikel pada kolom komentar postingan tugas ini.
Format Komentar
Nama : ..............
Kelas : XI PPLG ....
No Absen : .........
Link Blog : https://............
Contoh
Nama : Darsu
Kelas : XI PPLG 1
No Absen : 01
Link Blog : https://namablogku.blogspot.com/2026/06/challenge-flutter.html
KETENTUAN PENILAIAN
| Aspek Penilaian | Bobot |
|---|---|
| Analisis Program | 25% |
| Modifikasi Program | 25% |
| Dokumentasi Blog | 20% |
| Kelengkapan Tugas | 20% |
| Kerapihan dan Kreativitas | 10% |
Skor Maksimal : 100
KKM : 75
Selamat belajar, bereksperimen, dan jadilah Flutter Developer yang kreatif!
Catatan: Hasil praktikum tidak dikumpulkan dalam bentuk file. Setiap siswa wajib membuat artikel blog pribadi dan mengirimkan tautan (link) artikel melalui kolom komentar postingan ini dengan mencantumkan nama lengkap, kelas, dan nomor absen.
