Tugas Challenge flutter
CHALLENGE FLUTTER
Menganalisis & Memodifikasi Program main.dart
Nama Lengkap: RIAN RAMA ROMANSAH
Kelas: XI RPL 1
No. Absen: 27
Link Blog:https://riannnnnnnnnnnnnnn.blogspot.com/2026/06/challenge-flutter-menganalisis.html
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
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 : Rian', // NAMA DIGANTI JADI RIAN
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 : Rian Rama Romansah
Komentar
Posting Komentar