MODUL FLUTTER

BAB 2 :
STATELESS & STATEFUL & ASSETS
A. STATELESS

Stateless Widget adalah widget yang tidak berubah selama masa hidupnya.yang berarti
bahwa setelah widget dibuat, properti dan tampilannya tidak dapat diubah.
Stateless Widget digunakan ketika Anda memiliki elemen tampilan yang tidak
memerlukan perubahan selama sesi aplikasi, seperti teks statis, icon, atau gambar.
Stateless Widget tidak memiliki metode build yang dapat memperbarui tampilan widget
karena mereka tidak menyimpan keadaan internal. Mereka hanya merender tampilan
sesuai dengan konfigurasi awalnya.

Contoh sederhana kode Stateless:

B. STATEFUL
Stateful Widget adalah salah satu jenis widget dalam Flutter yang memiliki keadaan atau
state yang dapat berubah ubah. Ini berarti bahwa Stateful Widget dapat memperbarui
tampilan atau UI-nya ketika ada perubahan dalam keadaannya.
Stateful Widget terdiri dari dua bagian utama:

- Widget: Ini adalah bagian yang digunakan untuk membangun antarmuka

pengguna atau tampilan aplikasi. Widget ini biasanya telah disediakan oleh
Flutter, seperti Text, Button, atau Container.

- State: Ini adalah objek yang mengelola keadaan internal dari Stateful Widget.
State ini digunakan untuk menyimpan data yang dapat berubah selama masa
hidup widget, dan saat data ini berubah, widget akan diperbarui.

Stateful Widget sangat berguna ketika Anda perlu mengganti tampilan aplikasi
berdasarkan interaksi pengguna atau perubahan data. Contoh penggunaan Stateful
Widget adalah dalam pembuatan formulir interaktif, daftar yang dapat di scroll.

Contoh sederhana penggunaan Stateful:

C. ASSETS
Assets dalam Flutter merujuk pada berkas-berkas seperti gambar, font, atau file
konfigurasi yang dimasukkan ke dalam proyek Flutter dan dapat diakses oleh aplikasi.
Assets ini diletakkan di dalam direktori assets dalam proyek Flutter Anda.
Assets digunakan untuk menyertakan data statis yang diperlukan oleh aplikasi Anda.
Contohnya:
- Gambar: Anda dapat menyertakan gambar yang digunakan dalam aplikasi Anda,
seperti ikon, latar belakang, atau gambar lainnya.

- Font: Font khusus dapat disertakan untuk memastikan tampilan teks yang
konsisten di seluruh aplikasi.
D. MENAMBAHKAN GAMBAR
-Buatlah folder bernama “Assets” lalu dalam folder tersebut kalian buat folder kembali
bernama “Images” pada folder flutter kalian seperti contoh dibawah ini

Folder Assets

-Pada folder “pubspec.yaml” silahkan kalian cari line code dengan ada coment bernama
assets seperti dibawah ini
 LineCode Assets

-Setelah menemukan silahkan kalian un-comment lalu kalian ubah

“images/a_dot_burr.jpeg” Menjadi “assets/images/” seperti dibawah ini

Pubspec.yaml konfigurasi

-Untuk menambahkan gambar pada project kalian silahkan kalian ketikan kode dibawah
ini
Assets Pada Flutter
Maka akan menghasilkan output seperti dibawah ini
E. PENUGASAN
1. Ganti gambar pada contoh diatas serta buatkan 1 tombol kembali yang
berfungsi untuk reset hasil increment
KERJAKAN CONTOH SERTA PENUGASAN KUMPULKAN SOURCE CODE
BESERTA HASIL KEDALAM CLASSROOM