⚡ CHALLENGE FLUTTER

Menganalisis & Memodifikasi Program main.dart

📌 IDENTITAS

Nama Lengkap: Dhanis Fathan Gunawan

Kelas: XI RPL 2

No. Absen: 07

Link Blog: https://dhanisantibootloop.blogspot.com/2026/06/challenge-flutter.html

🔍 TUGAS 1 - HASIL PENGAMATAN

Apa judul aplikasi yang tampil? "Flutter Counter App" (setelah dimodifikasi menjadi "Absensi Siswa")

Berapa nilai awal yang ditampilkan? 0 (nol)

Apa yang terjadi ketika tombol "+" ditekan? Nilai angka pada tengah layar bertambah

Berapa kali nilai bertambah setiap tombol ditekan? Setiap kali ditekan, nilai bertambah 1

📝 TUGAS 2 - ANALISIS KODE

Kode	Fungsi
main()	Fungsi utama (entry point) program Flutter, pertama kali dijalankan
runApp()	Menjalankan widget utama ke layar
MaterialApp	Widget induk yang menyediakan desain Material Design
Scaffold	Menyediakan struktur dasar halaman (AppBar, body, FAB)
AppBar	Bilah atas aplikasi (judul halaman)
Text	Menampilkan teks
FloatingActionButton	Tombol aksi melayang (biasanya di kanan bawah)
setState()	Memberi tahu framework bahwa state berubah, UI perlu di-build ulang

🔄 TUGAS 3 - DIAGRAM ALUR PROGRAM

🚀 Program dijalankan

↓

📱 runApp(MyApp())

↓

🏠 MyApp → MaterialApp → HomePage

↓

➕ Tombol "+" ditekan

↓

⚙️ Fungsi _incrementCounter() dipanggil

↓

🔄 setState() → variabel _counter++

↓

✨ UI/Tampilan diperbarui

🛠️ TUGAS 4 - HASIL MODIFIKASI

Modifikasi 1: Judul "Absensi Siswa"

📱 [SCREENSHOT] AppBar menampilkan teks "Absensi Siswa"

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 : Ahmad Fauzan Ramadhan | Jumlah : 0"

// Kode Modifikasi (Fragment)
class _HomePageState extends State<HomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() { _counter++; });
  }

  void _resetCounter() {
    setState(() { _counter = 0; });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Absensi Siswa')), // Modifikasi 1
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Nama : Ahmad Fauzan Ramadhan', style: TextStyle(fontSize: 20)),
            Text('Jumlah : $_counter', style: TextStyle(fontSize: 40)), // Modifikasi 2
          ],
        ),
      ),
      floatingActionButton: Row(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          FloatingActionButton(onPressed: _resetCounter, child: Icon(Icons.refresh)),
          SizedBox(width: 10),
          FloatingActionButton(onPressed: _incrementCounter, child: Icon(Icons.school)), // Modifikasi 3
        ],
      ),
    );
  }
}
      

🏆 TUGAS 5 - CHALLENGE MANDIRI (Tombol Reset)

✓ SOLUSI Menambahkan tombol Reset yang mengembalikan nilai ke 0.

// Fungsi resetData()
void _resetCounter() {
  setState(() {
    _counter = 0;
  });
}

// Menambahkan tombol reset di floatingActionButton
floatingActionButton: Row(
  mainAxisAlignment: MainAxisAlignment.end,
  children: [
    FloatingActionButton(
      onPressed: _resetCounter,
      child: Icon(Icons.refresh),
      backgroundColor: Colors.orange,
    ),
    SizedBox(width: 16),
    FloatingActionButton(
      onPressed: _incrementCounter,
      child: Icon(Icons.add),
    ),
  ],
)
      

💡 Penjelasan: Tombol reset akan memanggil _resetCounter() yang di dalamnya terdapat setState() sehingga UI langsung berubah menampilkan angka 0.

🤔 REFLEKSI PEMBELAJARAN

Apa fungsi StatefulWidget? Widget yang state-nya bisa berubah dinamis selama aplikasi berjalan (mutable state).

Mengapa program menggunakan setState()? Agar UI bisa melakukan rebuild ketika ada perubahan data.

Apa yang terjadi jika setState() tidak digunakan? Data berubah tapi UI tidak akan memperbarui tampilan (tetap statis).

Widget apa yang paling sering digunakan? Scaffold, Text, FloatingActionButton, AppBar, Center.

Kesulitan selama praktikum? Memahami konsep state management dan penempatan tombol reset agar tidak bentrok dengan FAB default.

📌 KESIMPULAN

Praktikum Flutter ini memberikan pemahaman mendalam tentang struktur aplikasi berbasis StatefulWidget, pentingnya setState() untuk reactive UI, serta kemampuan memodifikasi widget seperti mengubah judul, ukuran teks, ikon, dan menambah fitur tombol reset. Dengan pendekatan neobrutalism pada dokumentasi, saya semakin termotivasi untuk eksplorasi UI/UX yang berani dan fungsional.

✅ Tugas telah diselesaikan | Dipublikasikan via Blogger | Challenge Flutter - Counter App Modifikasi