MENGANALISIS DAN MEMODIFIKASI PROGRAM MAIN.DART

June 04, 2026

CHALLENGE FLUTTER: MENGANALISIS DAN MEMODIFIKASI PROGRAM MAIN.DART

Nama: Fitra Anzani
Kelas: XI RPL 1
No. Absen: 9

TUGAS 1 - MENGAMATI PROGRAM

1. Apa judul aplikasi yang tampil?

Counter App

2. Berapa nilai awal yang ditampilkan?

3. Apa yang terjadi ketika tombol "+" ditekan?

Nilai pada variabel jumlah akan bertambah dan tampilan akan diperbarui.

4. Berapa kali nilai bertambah setiap tombol ditekan?

Bertambah 1 kali (1 angka) setiap tombol ditekan.

TUGAS 2 - ANALISIS KODE

Kode	Fungsi
`main()`	Fungsi utama yang pertama kali dijalankan oleh program.
`runApp()`	Menjalankan aplikasi Flutter dan menampilkan widget utama.
`MaterialApp`	Widget utama yang mengatur tampilan aplikasi berbasis Material Design.
`Scaffold`	Kerangka dasar halaman aplikasi Flutter.
`AppBar`	Menampilkan bagian header atau judul aplikasi.
`Text`	Menampilkan teks pada layar.
`FloatingActionButton`	Tombol aksi yang mengambang di layar.
`setState()`	Memperbarui data dan menampilkan perubahan pada layar.

TUGAS 3 - ANALISIS ALUR PROGRAM

Diagram Alur Program


Program dijalankan
        ↓
      main()
        ↓
     runApp()
        ↓
       MyApp
        ↓
     HomePage
        ↓
Tampilan Counter App muncul
        ↓
 Tombol "+" ditekan
        ↓
   tambahData()
        ↓
    setState()
        ↓
Nilai jumlah bertambah
        ↓
Tampilan diperbarui

TUGAS 4 - MODIFIKASI PROGRAM

Modifikasi 1

Mengubah judul aplikasi menjadi:

"Absensi Siswa"

Hasil: Judul aplikasi berubah dari Counter App menjadi Absensi Siswa.

Modifikasi 2

Mengubah ukuran teks menjadi:


fontSize: 40

Hasil: Teks menjadi lebih besar dan mudah dibaca.

Modifikasi 3

Mengubah ikon tombol dari:


Icons.add

menjadi:


Icons.school

Hasil: Tombol menampilkan ikon sekolah.

Modifikasi 4

Menambahkan nama pada tampilan aplikasi.

Contoh hasil:


Nama : Fitra Anzani
Jumlah : 0

Hasil: Nama pengguna tampil pada aplikasi.

TUGAS 5 - CHALLENGE MANDIRI

Menambahkan Tombol Reset

Function yang digunakan:


void resetData() {
  setState(() {
    jumlah = 0;
  });
}

Fungsi Tombol Reset

Tombol Reset digunakan untuk mengembalikan nilai jumlah menjadi 0 ketika ditekan.

REFLEKSI

1. Apa fungsi StatefulWidget?

StatefulWidget digunakan untuk membuat tampilan yang dapat berubah sesuai perubahan data.

2. Mengapa program menggunakan setState()?

Karena setState() digunakan untuk memberi tahu Flutter bahwa data telah berubah sehingga tampilan harus diperbarui.

3. Apa yang terjadi jika setState() tidak digunakan?

Data mungkin berubah, tetapi tampilan di layar tidak akan diperbarui.

4. Widget apa yang paling sering digunakan pada program ini?

Widget yang paling sering digunakan adalah Text, Scaffold, dan FloatingActionButton.

5. Apa kesulitan yang Anda temukan selama praktikum?

Kesulitan yang saya temukan adalah memahami fungsi setiap widget dan cara kerja setState() dalam memperbarui tampilan aplikasi.

Kesimpulan

Pada praktikum ini saya mempelajari struktur dasar Flutter, fungsi widget, cara kerja StatefulWidget, penggunaan setState(), serta melakukan modifikasi sederhana pada aplikasi Counter App menjadi aplikasi Absensi Siswa. Praktikum ini membantu saya memahami dasar pembuatan aplikasi mobile menggunakan Flutter.

Search This Blog

Fitra Anzani