Challenge Flutter

Menganalisis & Memodifikasi
Program main.dart

XI RPL 1  ·  Tahun Ajaran 2025/2026

Nama Lengkap

Dika Saputra Sunandar

Kelas

XI RPL 1

No. Absen

06

1

Hasil Pengamatan

QApa judul aplikasi yang tampil?

Counter App

QBerapa nilai awal yang ditampilkan?

0 (nol)

QApa yang terjadi ketika tombol "+" ditekan?

Nilai angka bertambah

QBerapa kali nilai bertambah setiap tombol ditekan?

Setiap kali ditekan, nilai bertambah 1

2

Analisis Kode

main()

Titik awal / gerbang pertama saat program dijalankan.

runApp()

Menghidupkan aplikasi Flutter dan menampilkan widget utama ke layar.

MaterialApp

Mengatur konfigurasi dasar aplikasi: tema, judul, dan navigasi.

Scaffold

Struktur dasar halaman: AppBar, Body, dan Tombol.

AppBar

Bilah navigasi di bagian paling atas aplikasi.

Text

Widget untuk menampilkan tulisan atau teks pada layar.

FloatingActionButton

Tombol aksi melayang berbentuk lingkaran di sudut bawah layar.

setState()

Memberi tahu Flutter ada perubahan data dan memperbarui tampilan.

3

Diagram Alur Program

Program Dijalankan

→

runApp()

→

MyApp (MaterialApp)

↓

HomePage (Stateful)

→

Tampilan Awal (Jumlah: 0)

↓

Aksi 1

Tombol "+" Ditekan

↓

tambahData()

↓

jumlah++ (+1)

Aksi 2

Tombol "Reset" Ditekan

↓

resetData()

↓

jumlah = 0

↓

setState() → build() dijalankan ulang

→

Tampilan Diperbarui

1. Fungsi main() memanggil runApp() sebagai titik awal untuk menghidupkan seluruh framework Flutter.

2. MyApp bertindak sebagai root widget yang mengatur konfigurasi dasar aplikasi seperti tema dan judul.

3. Flutter membuat objek State (_HomePageState) untuk menyimpan variabel jumlah = 0.

4. Tombol "+" memicu tambahData() → jumlah++. Tombol "Reset" memicu resetData() → jumlah = 0.

5. Panggilan setState() otomatis memicu Flutter untuk mengeksekusi ulang build(), sehingga angka baru langsung dirender di layar.

4

Hasil Modifikasi

1

Mengubah Judul Aplikasi

Judul bawaan "Counter App" diubah menjadi "Absensi Siswa" agar sesuai dengan fungsi baru aplikasi.

2

Mengubah Ukuran Teks

Ukuran font teks hitungan diperbesar dari 30 menjadi 40 agar jumlah absensi terlihat lebih jelas dan dominan.

3

Mengubah Ikon Tombol

Ikon Icons.add diganti menjadi Icons.school untuk memperkuat tema pendidikan.

4

Menambahkan Nama pada Tampilan

Teks Nama dan Kelas ditambahkan di atas teks jumlah sebagai identitas pemilik aplikasi.

Absensi Siswa — Flutter App

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: 'Absensi Siswa', // Modifikasi 1
      home: const HomePage(),
    );
  }
}

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('Absensi Siswa'), // Modifikasi 1
        backgroundColor: Colors.blue,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              'Nama : Budi', // Modifikasi 4
              style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
            ),
            Text('Jumlah : $jumlah',
              style: const TextStyle(fontSize: 40), // Modifikasi 2
            ),
          ],
        ),
      ),
      floatingActionButton: Row(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          FloatingActionButton(
            onPressed: resetData, heroTag: 'btnReset',
            backgroundColor: Colors.red,
            child: const Icon(Icons.refresh),
          ),
          const SizedBox(width: 12),
          FloatingActionButton(
            onPressed: tambahData, heroTag: 'btnTambah',
            backgroundColor: Colors.blue,
            child: const Icon(Icons.school), // Modifikasi 3
          ),
        ],
      ),
    );
  }
}

5

Challenge Mandiri — Tombol Reset

Pada tahap ini, fitur baru berupa tombol Reset ditambahkan untuk mengembalikan hitungan absensi ke angka semula. Fungsi baru resetData() dibuat dengan perubahan data dibungkus menggunakan setState() untuk mengubah variabel jumlah kembali ke 0 secara instan. Kedua tombol disusun berdampingan secara horizontal dengan heroTag unik masing-masing.

Tombol Reset — Challenge 5

R

Refleksi

Apa fungsi StatefulWidget?

StatefulWidget berfungsi untuk membuat halaman atau komponen yang tampilannya dapat berubah secara dinamis saat aplikasi berjalan, ketika ada data yang bisa berubah akibat interaksi pengguna.

Mengapa program menggunakan setState()?

Untuk memberi tahu framework Flutter bahwa telah terjadi perubahan pada data internal aplikasi, sehingga Flutter memicu penggambaran ulang tampilan layar sesuai data terbaru.

Apa yang terjadi jika setState() tidak digunakan?

Nilai variabel tetap berubah di latar belakang, namun perubahan tidak memicu pembaruan layar. Pengguna tetap melihat tampilan lama karena layar tidak diperbarui.

Widget apa yang paling sering digunakan?

Text, FloatingActionButton, Column, Row, dan Scaffold sebagai struktur dasar halaman aplikasi.

Apa kesulitan yang ditemukan selama praktikum?

Saat menambahkan tombol kedua untuk fitur Reset, Flutter error karena dua FloatingActionButton tanpa heroTag unik dan tanpa layout Row yang tepat. Masalah berhasil diatasi setelah mempelajari penyusunan tombol secara horizontal.