Tugas hasil pengamatan
Tugas Challenge flutter
Juni 05, 2026
CHALLENGE FLUTTER
Menganalisis & Memodifikasi Program main.dart
Nama Lengkap: Mizan Achmad Alfahrezi
Kelas: XI RPL 1
No. Absen: 20
TUGAS 1 - HASIL PENGAMATAN
Pertanyaan Jawaban
Apa judul aplikasi yang tampil? Advanced Counter App
Berapa nilai awal yang ditampilkan? 0
Apa yang terjadi ketika tombol "+" ditekan? Nilai jumlah bertambah 1 dan tampilan langsung berubah/refresh
Berapa kali nilai bertambah setiap tombol ditekan? 1 kali
TUGAS 2 - ANALISIS KODE
Kode Fungsi
main() Fungsi utama (entry point) yang pertama kali dijalankan saat program dimulai
runApp() Fungsi untuk menjalankan widget yang diberikan sebagai root dari aplikasi
MaterialApp Widget root yang menyediakan konfigurasi dasar aplikasi Material Design (theme, title, home, dll)
Scaffold Widget yang menyediakan struktur visual dasar halaman (appBar, body, floatingActionButton, dll)
AppBar Widget untuk membuat bar/navbar di bagian atas halaman (biasanya berisi judul)
Text Widget untuk menampilkan teks string di layar
FloatingActionButton Widget tombol bulat melayang yang biasanya untuk aksi utama aplikasi
setState() Fungsi yang memberi tahu framework bahwa state/internal data berubah, sehingga UI perlu di-render ulang
TUGAS 3 - DIAGRAM ALUR PROGRAM
Program dijalankan
↓
main()
↓
runApp(MyApp())
↓
MyApp (StatelessWidget)
↓
MaterialApp (home: HomePage)
↓
HomePage (StatefulWidget)
↓
HomePageState (State)
↓
Tampilan awal (jumlah = 0)
↓
Tombol "+" ditekan
↓
tambahData() dipanggil
↓
setState() dijalankan
↓
jumlah++ (nilai bertambah)
↓
build() dijalankan ulang
↓
Tampilan diperbarui (nilai baru)
TUGAS 4 - HASIL MODIFIKASI
Modifikasi 1: Judul "Absensi Siswa"
[SCREENSHOT] AppBar menampilkan teks "Absen Siswa App"
Modifikasi 2: Ukuran Teks 40
[SCREENSHOT] Teks angka tengah berukuran fontSize: 40
Modifikasi 3: Ikon Icons.school
[SCREENSHOT] FAB berganti ikon sekolah 🏫
Modifikasi 4: Tambah Nama Siswa
[SCREENSHOT] Tampilan: "Nama : MIZAN | Jumlah : 0"
CODE
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,
title: 'Absen Siswa App',
home: const HomePage(),
);
}
}
class HomePage extends StatefulWidget {
const HomePage({super.key});
@override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
int jumlah = 0;
void tambahData() {
setState(() {
jumlah++;
});
}
void resetData() {
setState(() {
jumlah = 0;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Absen Siswa App'),
backgroundColor: Colors.deepPurple, // WARNA APPBAR DIUBAH
foregroundColor: Colors.white,
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text(
'Nama : mizan', // NAMA DIGANTI JADI MIZAN
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.w500,
color: Colors.deepPurple, // WARNA TEKS NAMA
),
),
const SizedBox(height: 20),
Text(
'Jumlah : $jumlah',
style: const TextStyle(
fontSize: 40,
fontWeight: FontWeight.bold,
color: Colors.orange, // WARNA TEKS JUMLAH
),
),
],
),
),
floatingActionButton: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
FloatingActionButton(
heroTag: "reset",
onPressed: resetData,
backgroundColor: Colors.red, // WARNA TOMBOL RESET MERAH
child: const Icon(Icons.refresh),
),
const SizedBox(width: 10),
FloatingActionButton(
heroTag: "tambah",
onPressed: tambahData,
backgroundColor: Colors.deepPurple, // WARNA TOMBOL TAMBAH
child: const Icon(Icons.school),
),
],
),
);
}
}
TUGAS 5 - CHALLENGE MANDIRI (Tombol Reset)
✓ SOLUSI Menambahkan tombol Reset yang mengembalikan nilai ke 0.
FloatingActionButton(
heroTag: "reset",
onPressed: resetData, // <-- INI YANG MEMANGGIL FUNGSI RESET
backgroundColor: Colors.red,
child: const Icon(Icons.refresh),
),
REFLEKSI PEMBELAJARAN
APA FUNGSI STATEFULWIDGET?
StatefulWidget digunakan untuk membuat widget yang tampilannya dapat berubah secara dinamis ketika ada data atau state yang berubah selama aplikasi berjalan.
MENGAPA PROGRAM MENGGUNAKAN SETSTATE()?
Program menggunakan setState() karena fungsi ini berfungsi untuk memberitahu Flutter bahwa terjadi perubahan pada data, sehingga tampilan UI harus di-render ulang agar sesuai dengan data terbaru.
APA YANG TERJADI JIKA SETSTATE() TIDAK DIGUNAKAN?
Jika setState() tidak digunakan, meskipun nilai variabel berubah di dalam memori, layar tidak akan berubah. Pengguna tetap melihat tampilan lama meskipun data sebenarnya sudah berbeda.
WIDGET APA YANG PALING SERING DIGUNAKAN?
Widget yang paling sering digunakan dalam program ini adalah Scaffold sebagai struktur halaman, AppBar untuk navigasi atas, Column dan Row untuk mengatur tata letak, serta FloatingActionButton untuk tombol aksi.
KESULITAN SELAMA PRAKTIKUM?
Kesulitan yang saya temukan selama praktikum adalah memahami alur kerja StatefulWidget dan kapan tepatnya setState() harus dipanggil. Saya juga sempat kebingungan saat mengatur posisi dua tombol FloatingActionButton agar tidak bentrok, serta memahami penggunaan heroTag untuk membedakan setiap tombol.
KESIMPULAN
Berdasarkan praktikum membuat aplikasi counter absensi siswa dengan Flutter, dapat disimpulkan bahwa StatefulWidget dan setState() adalah komponen kunci untuk membuat aplikasi yang dinamis. StatefulWidget menyimpan data yang dapat berubah (variabel jumlah), sedangkan setState() berfungsi memberitahu Flutter untuk memperbarui tampilan setiap kali ada perubahan data. Tanpa setState(), meskipun data berubah, layar tidak akan pernah memperbarui tampilannya. Aplikasi ini berhasil menampilkan nama siswa "Rian", tombol tambah untuk menambah jumlah absensi, dan tombol reset untuk mengembalikan nilai ke 0. Seluruh widget seperti Scaffold, AppBar, Column, Row, dan FloatingActionButton bekerja sama membangun antarmuka yang menarik dan fungsional.Berdasarkan praktikum membuat aplikasi counter absensi siswa dengan Flutter, dapat disimpulkan bahwa StatefulWidget dan setState() adalah komponen kunci untuk membuat aplikasi yang dinamis. StatefulWidget menyimpan data yang dapat berubah (variabel jumlah), sedangkan setState() berfungsi memberitahu Flutter untuk memperbarui tampilan setiap kali ada perubahan data. Tanpa setState(), meskipun data berubah, layar tidak akan pernah memperbarui tampilannya. Aplikasi ini berhasil menampilkan nama siswa "Rian", tombol tambah untuk menambah jumlah absensi, dan tombol reset untuk mengembalikan nilai ke 0. Seluruh widget seperti Scaffold, AppBar, Column, Row, dan FloatingActionButton bekerja sama membangun antarmuka yang menarik dan fungsional.
Oleh : Mizan Achmad Alfahrezi
Komentar
Postingan populer dari blog ini
Membangun Aplikasi Kuliner Nusantara dengan Login dan Navigasi Multi-Halaman
September 12, 2025
Gambar
Membangun Aplikasi Kuliner Nusantara dengan Login dan Navigasi Multi-Halaman Pada pelajaran kali ini, kita belajar bagaimana membuat aplikasi kuliner Nusantara menggunakan Flutter , mulai dari membuat tampilan utama, navigasi antar halaman, hingga implementasi login sederhana di halaman profil. Berikut hal-hal penting yang dipelajari: Struktur Aplikasi Flutter dengan StatefulWidget Kita membuat aplikasi menggunakan StatefulWidget agar aplikasi bisa merespon perubahan data, seperti tema gelap/terang dan daftar favorit kuliner . Navigasi dengan BottomNavigationBar Aplikasi memiliki 5 halaman : Beranda, Kuliner, Pencarian, Favorit, dan Profil. Navigasi dilakukan menggunakan BottomNavigationBar , yang memungkinkan pengguna berpindah antar halaman dengan mudah. Menampilkan Data Kuliner dengan GridView Daftar kuliner ditampilkan menggunakan GridView.builder . Setiap item memiliki gambar dan nama , serta dapat ditandai sebagai favorit . Fitur Favori...
BACA SELENGKAPNYA
Materi Widget
Oktober 23, 2025
Gambar
Mengenal widget dasar Flutter (Text, Image, Column, Row, Icon, Button) & membuat aplikasi sederhana. 📘 Tugas: Buat aplikasi “Kartu Profil Sederhana – Aku & Hobiku” Syarat: ✅ Minimal 5 widget berbeda ✅ Ada foto/ilustrasi, nama, jurusan ✅ Deskripsi hobi atau cita-cita ✅ Tombol “Hubungi Saya” Hasil : Kalo kalian pengen tinggal salin codingan ini lalu buka zapp.run import 'package:flutter/material.dart'; void main() => runApp(const MyProfileApp()); class MyProfileApp extends StatelessWidget { const MyProfileApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: Scaffold( backgroundColor: const Color.fromARGB(255, 149, 155, 160), appBar: AppBar( title: const Text('Profil'), backgroundColor: Color.fr...
BACA SELENGKAPNYA
2 ARTIKEL PENGEMBANGAN GIM
Januari 13, 2026
Gambar
Artikel 1 Pengertian dan Tahapan Pengembangan Gim Pengembangan gim adalah proses pembuatan permainan digital dari awal hingga siap dimainkan. Proses ini dimulai dari mencari ide, merancang konsep permainan, membuat desain visual, melakukan pemrograman, hingga tahap pengujian. Setiap tahapan harus dilakukan dengan teliti agar gim dapat berjalan dengan baik. Pada tahap perencanaan, pengembang menentukan jenis gim, tujuan, dan aturan permainan. Selanjutnya, pada tahap desain, dibuat karakter, latar, serta alur permainan. Setelah itu, programmer mulai membuat sistem gim agar dapat dimainkan sesuai dengan rencana yang telah dibuat. Tahap terakhir adalah pengujian gim untuk memastikan tidak ada kesalahan atau bug. Jika ditemukan masalah, pengembang akan melakukan perbaikan. Setelah semua tahapan selesai, gim siap untuk dirilis dan dimainkan oleh pengguna. Artikel 2 Perkembangan Pengembangan Gim di Era Digital Pengembangan gim mengalami perkembangan yang sangat pesat seiring dengan...
BACA SELENGKAPNYA
Diberdayakan oleh Blogger
Gambar tema oleh Michael Elkan
Komentar
Posting Komentar