Praktikum Flutter: Analisis dan Modifikasi Program Counter App
Nama Lengkap : SANDI SEFTIAN
Kelas : XI RPL 2
No Absen : 30
Pendahuluan
Pada praktikum ini saya mempelajari dasar pemrograman Flutter menggunakan program Counter App. Program ini digunakan untuk memahami konsep StatefulWidget, setState(), dan bagaimana Flutter memperbarui tampilan ketika data berubah.
Tugas 1 - Hasil Pengamatan
Saat program pertama kali dijalankan, nilai counter atau jumlah masih bernilai 0. Ketika tombol ditekan, nilai jumlah akan bertambah satu setiap kali tombol diklik. Perubahan nilai tersebut langsung ditampilkan pada layar aplikasi.
Program memanfaatkan StatefulWidget sehingga data dapat berubah selama aplikasi berjalan. Selain itu, fungsi setState() digunakan untuk memperbarui tampilan ketika nilai berubah.
Tugas 2 - Analisis Kode Program
1. Fungsi main()
Fungsi main() merupakan titik awal eksekusi program Flutter. Fungsi ini menjalankan aplikasi menggunakan runApp().
void main() {
runApp(MyApp());
}
2. Widget MyApp
Widget MyApp digunakan sebagai root widget aplikasi yang mengatur tema dan halaman utama aplikasi.
3. StatefulWidget
StatefulWidget digunakan karena nilai jumlah dapat berubah ketika tombol ditekan.
4. Variabel jumlah
Variabel jumlah digunakan untuk menyimpan nilai counter yang akan ditampilkan pada layar.
5. Fungsi tambahData()
Fungsi ini digunakan untuk menambah nilai jumlah sebanyak satu.
void tambahData() {
setState(() {
jumlah++;
});
}
6. setState()
setState() digunakan untuk memberi tahu Flutter bahwa terdapat perubahan data sehingga tampilan harus diperbarui.
Tugas 3 - Diagram Alur Program
Mulai ↓ Tampilkan jumlah = 0 ↓ Pengguna menekan tombol ↓ Jumlah bertambah 1 ↓ setState() ↓ Tampilan diperbarui ↓ Selesai
Tugas 4 - Modifikasi Program
Modifikasi 2 - Mengubah Ukuran Teks Menjadi 40
Pada bagian ini ukuran teks jumlah diubah menjadi 40 agar tampil lebih besar.
Text(
'$jumlah',
style: TextStyle(
fontSize: 40,
),
)
Screenshot Hasil:
Modifikasi 3 - Mengubah Ikon Tombol
Ikon tombol diubah dari Icons.add menjadi Icons.school.
Sebelum:
Icon(Icons.add)
Sesudah:
Icon(Icons.school)
Screenshot Hasil:
Modifikasi 4 - Menambahkan Nama pada Tampilan
Pada tampilan aplikasi ditambahkan identitas nama pengguna.
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Nama : [Nama Anda]',
style: TextStyle(fontSize: 20),
),
SizedBox(height: 10),
Text(
'Jumlah : $jumlah',
style: TextStyle(fontSize: 40),
),
],
)
Screenshot Hasil:
Tugas 5 - Challenge Mandiri
Menambahkan Tombol Reset
Tombol Reset digunakan untuk mengembalikan nilai jumlah menjadi 0. Ketika tombol ditekan, fungsi resetData() akan dijalankan.
Function resetData()
void resetData() {
setState(() {
jumlah = 0;
});
}
Tombol Reset
ElevatedButton(
onPressed: resetData,
child: Text('Reset'),
)
Dengan fitur ini pengguna dapat mengembalikan nilai jumlah ke kondisi awal tanpa perlu menjalankan ulang aplikasi.
Screenshot Hasil Challenge:
Refleksi Pembelajaran
1. Apa fungsi StatefulWidget?
StatefulWidget digunakan untuk membuat tampilan yang dapat berubah selama aplikasi berjalan. Widget ini memungkinkan data diperbarui sesuai interaksi pengguna.
2. Mengapa program menggunakan setState()?
Karena setState() digunakan untuk memberi tahu Flutter bahwa ada perubahan data sehingga tampilan aplikasi harus diperbarui.
3. Apa yang terjadi jika setState() tidak digunakan?
Data mungkin berubah, tetapi tampilan aplikasi tidak akan diperbarui sehingga pengguna tidak dapat melihat perubahan tersebut.
4. Widget apa yang paling sering digunakan pada program ini?
- Scaffold
- AppBar
- Text
- Column
- Center
- FloatingActionButton
5. Apa kesulitan yang Anda temukan selama praktikum?
Kesulitan yang saya temukan adalah memahami cara kerja StatefulWidget dan setState(), terutama bagaimana Flutter memperbarui tampilan ketika data berubah. Namun setelah mencoba beberapa modifikasi, saya menjadi lebih memahami konsep state pada Flutter.
Kesimpulan
Melalui praktikum ini saya mempelajari dasar pembuatan aplikasi Flutter, penggunaan StatefulWidget, fungsi setState(), serta cara melakukan modifikasi program. Saya juga berhasil menambahkan fitur baru berupa tombol Reset yang mengembalikan nilai jumlah menjadi 0. Praktikum ini memberikan pemahaman yang lebih baik mengenai konsep state management dasar pada Flutter.
Dokumentasi
Tambahkan seluruh screenshot hasil praktikum pada bagian ini sebagai bukti pelaksanaan tugas.
Terima Kasih
Demikian hasil praktikum Flutter yang telah saya kerjakan. Semoga laporan ini dapat menjadi dokumentasi pembelajaran dan menambah pemahaman mengenai pengembangan aplikasi menggunakan Flutter.
Komentar
Posting Komentar