CHALLENGE FLUTTER: MENGANALISIS DAN MEMODIFIKASI PROGRAM MAIN.DART

 

Praktikum Flutter: Analisis dan Modifikasi Program Counter App

Nama Lengkap: Sandi darma kusumah
Kelas: XI RPL 1
Nomor Absen: ( 30 )
Tanggal Praktikum: (6/5/2026)

Pendahuluan

Flutter merupakan framework yang dikembangkan oleh Google untuk membangun aplikasi mobile, web, dan desktop dengan satu basis kode (cross-platform). Pada praktikum ini, peserta didik mempelajari struktur dasar program Flutter, memahami fungsi widget yang digunakan, menganalisis alur kerja aplikasi, serta melakukan modifikasi sederhana pada program Counter App.

Melalui kegiatan ini, peserta didik dapat memahami bagaimana Flutter bekerja dalam menampilkan antarmuka pengguna (UI) dan bagaimana perubahan data dapat langsung diperbarui pada tampilan aplikasi menggunakan konsep state management sederhana.

Tujuan Praktikum

Setelah menyelesaikan praktikum ini, peserta didik diharapkan mampu:

  1. Mengidentifikasi struktur dasar program Flutter.
  2. Menjelaskan fungsi widget yang digunakan.
  3. Menganalisis alur kerja aplikasi Flutter.
  4. Melakukan modifikasi sederhana pada kode program.
  5. Mendokumentasikan hasil pembelajaran dalam bentuk artikel blog.

Tugas 1 – Hasil Pengamatan Program

Setelah menjalankan program Counter App pada DartPad Flutter, diperoleh hasil pengamatan sebagai berikut:

1. Apa judul aplikasi yang tampil?

Judul aplikasi yang tampil adalah Counter App.

2. Berapa nilai awal yang ditampilkan?

Nilai awal yang ditampilkan adalah 0.

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

Ketika tombol "+" ditekan, nilai counter akan bertambah.

4. Berapa kali nilai bertambah setiap tombol ditekan?

Nilai bertambah 1 angka setiap kali tombol ditekan.

Tugas 2 – Analisis Kode Program

KodeFungsi
main()Fungsi utama yang pertama kali dijalankan saat aplikasi dimulai.
runApp()Menjalankan widget utama Flutter.
MaterialAppMenyediakan struktur aplikasi dengan desain Material Design.
ScaffoldKerangka dasar tampilan aplikasi.
AppBarMenampilkan judul aplikasi pada bagian atas layar.
TextMenampilkan teks pada layar.
FloatingActionButtonTombol aksi yang digunakan untuk menambah nilai counter.
setState()Memperbarui data dan menampilkan perubahan pada antarmuka aplikasi.

Tugas 3 – Analisis Alur Program

Berikut adalah alur kerja program Counter App:

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

Penjelasan Alur

Saat aplikasi dijalankan, fungsi main() akan dipanggil terlebih dahulu. Selanjutnya runApp() menjalankan widget utama aplikasi. Setelah tampilan muncul, pengguna dapat menekan tombol tambah (+). Tombol tersebut memanggil fungsi tambahData() yang akan mengubah nilai counter. Perubahan data kemudian diproses oleh setState() sehingga tampilan aplikasi diperbarui secara otomatis.


Tugas 4 – Modifikasi Program

Modifikasi 1 – Mengubah Judul Aplikasi

Judul aplikasi diubah menjadi: "Absensi Siswa".

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

Modifikasi 2 – Mengubah Ukuran Teks Menjadi 40

Hasil: Angka counter tampil lebih besar dan lebih mudah dibaca.

Modifikasi 3 – Mengubah Ikon Tombol

Hasil: Ikon tombol berubah dari tanda tambah (+) menjadi ikon sekolah.

Modifikasi 4 – Menambahkan Nama pada Tampilan




Tugas 5 – Challenge Mandiri

Pada challenge ini ditambahkan tombol Reset yang berfungsi mengembalikan nilai counter menjadi 0.

Cara Kerja

Ketika tombol Reset ditekan, fungsi resetData() dijalankan. Fungsi tersebut mengubah nilai variabel jumlah menjadi 0 menggunakan setState(). Setelah itu Flutter akan memperbarui tampilan sehingga nilai counter kembali ke kondisi awal.


Refleksi Pembelajaran

1. Apa fungsi StatefulWidget?

StatefulWidget digunakan untuk membuat widget yang datanya dapat berubah selama aplikasi berjalan.

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?

Perubahan data tidak akan terlihat pada layar meskipun nilai variabel sudah berubah.

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 ditemukan adalah memahami hubungan antara perubahan data dan proses pembaruan tampilan menggunakan setState().

Kesimpulan

Melalui praktikum ini saya mempelajari dasar-dasar pengembangan aplikasi menggunakan Flutter. Saya memahami struktur program Flutter, fungsi berbagai widget, serta cara kerja StatefulWidget dan setState(). Selain itu, saya berhasil melakukan beberapa modifikasi pada aplikasi seperti mengubah judul, ukuran teks, ikon tombol, menambahkan identitas pengguna, dan membuat fitur Reset. Praktikum ini memberikan pemahaman yang lebih baik mengenai konsep dasar Flutter dan pengembangan aplikasi interaktif.

Komentar

Posting Komentar