Praktikum Flutter: Analisis dan Modifikasi Program Counter App

Nama Lengkap: Caca Ardiansyah

Kelas: XI RPL 2

Nomor Absen: 4

---

Pendahuluan

Pada praktikum kali ini saya mempelajari dasar-dasar pemrograman Flutter menggunakan aplikasi sederhana bernama Counter App. Praktikum ini bertujuan untuk memahami struktur program Flutter, fungsi widget yang digunakan, alur kerja aplikasi, serta melakukan modifikasi sederhana pada kode program.

Melalui kegiatan ini saya dapat mengetahui bagaimana Flutter bekerja dalam menampilkan antarmuka pengguna dan bagaimana perubahan data dapat langsung diperbarui pada layar menggunakan fungsi setState().

Tugas 1 - Hasil Pengamatan Program

Setelah menjalankan program 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 pada variabel jumlah akan bertambah.
4. Berapa kali nilai bertambah setiap tombol ditekan?
   Nilai bertambah sebanyak 1 setiap kali tombol ditekan.

Tugas 2 - Analisis Kode

Kode	Fungsi
main()	Fungsi utama yang pertama kali dijalankan saat aplikasi dimulai.
runApp()	Menjalankan aplikasi Flutter.
MaterialApp	Widget utama yang menyediakan tampilan Material Design.
Scaffold	Kerangka dasar halaman aplikasi.
AppBar	Menampilkan judul aplikasi pada bagian atas.
Text	Menampilkan teks pada layar.
FloatingActionButton	Tombol aksi utama yang digunakan untuk menambah nilai.
setState()	Memperbarui data dan tampilan aplikasi ketika terjadi perubahan.

Tugas 3 - Analisis Alur Program

Alur kerja program dapat dijelaskan sebagai berikut:

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

Dari diagram di atas dapat diketahui bahwa setiap kali tombol ditekan, fungsi tambahData() akan dipanggil. Fungsi tersebut menggunakan setState() untuk memperbarui nilai variabel jumlah sehingga tampilan pada layar ikut berubah.

Tugas 4 - Modifikasi Program

Pada bagian ini dilakukan beberapa perubahan terhadap program.

Modifikasi 1

Mengubah judul aplikasi dari Counter App menjadi Absensi Siswa.

Screenshot: Tambahkan screenshot hasil modifikasi di sini.

Modifikasi 2

Mengubah ukuran teks dari 30 menjadi 40.

Screenshot: Tambahkan screenshot hasil modifikasi di sini.

Modifikasi 3

Mengubah ikon tombol dari:

Icons.add

menjadi:

Icons.school

Screenshot: Tambahkan screenshot hasil modifikasi di sini.

Modifikasi 4

Menambahkan identitas nama pada tampilan aplikasi.

Nama : Caca Ardiansyah
Jumlah : 0

Screenshot: Tambahkan screenshot hasil modifikasi di sini.

Tugas 5 - Challenge Mandiri

Pada challenge mandiri saya menambahkan tombol Reset. Tombol ini berfungsi untuk mengembalikan nilai jumlah menjadi 0 setelah sebelumnya bertambah akibat tombol utama ditekan.

Langkah yang dilakukan yaitu:

1. Membuat fungsi resetData().
2. Menggunakan setState().
3. Mengubah nilai jumlah menjadi 0.
4. Menambahkan tombol baru menggunakan ElevatedButton.

Dengan fitur ini pengguna dapat mengulang perhitungan dari awal tanpa harus menjalankan ulang aplikasi.

Kode Program Setelah Dimodifikasi

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',
      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('Absensi Siswa'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              'Nama : Caca Ardiansyah',
              style: TextStyle(fontSize: 30),
            ),
            Text(
              'Jumlah : $jumlah',
              style: const TextStyle(fontSize: 40),
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: resetData,
              child: const Text('Reset'),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: tambahData,
        child: const Icon(Icons.school),
      ),
    );
  }
}

Refleksi Pembelajaran

1. Apa fungsi StatefulWidget?

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

2. Mengapa program menggunakan setState()?

Program menggunakan setState() karena Flutter perlu mengetahui bahwa data telah berubah sehingga tampilan dapat diperbarui secara otomatis.

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

Jika setState() tidak digunakan, data mungkin berubah, tetapi tampilan pada layar tidak akan ikut diperbarui.

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

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

5. Apa kesulitan yang Anda temukan selama praktikum?

Kesulitan yang saya temukan adalah memahami alur perubahan data dari tombol menuju tampilan serta memahami fungsi dari setiap widget yang digunakan.

Kesimpulan

Praktikum ini memberikan pemahaman dasar mengenai struktur program Flutter dan penggunaan widget. Saya belajar bagaimana aplikasi Flutter dijalankan melalui fungsi main() dan runApp(), serta bagaimana setState() digunakan untuk memperbarui tampilan ketika data berubah.

Selain itu, saya juga berhasil melakukan beberapa modifikasi program seperti mengubah judul aplikasi, ukuran teks, ikon tombol, menambahkan identitas diri, dan membuat fitur reset. Dengan praktikum ini saya menjadi lebih memahami konsep dasar pengembangan aplikasi menggunakan Flutter.