| Widget | Fungsi | Kapan Digunakan |
|---|
StatelessWidget | Widget tanpa state (data) internal | Untuk UI statis yang tidak berubah |
StatefulWidget | Widget dengan state (data) internal | Untuk UI dinamis yang bisa berubah |
Text | Menampilkan teks sederhana | Label, paragraf, judul, dll. |
RichText | Menampilkan teks dengan berbagai style | Saat butuh kata tebal/miring dalam satu kalimat |
Icon | Menampilkan ikon dari set ikon | Untuk simbol UI yang umum |
| Widget | Fungsi | Kapan Digunakan |
|---|
Container | Wrapper serbaguna untuk styling & posisi | Memberi padding, margin, warna, dekorasi |
Row | Menyusun widget anak secara horizontal | Untuk item yang berjajar ke samping |
Column | Menyusun widget anak secara vertikal | Untuk item yang berbaris ke bawah |
Stack | Menumpuk widget di atas satu sama lain | Membuat overlay, badge di atas ikon |
Expanded | Mengisi ruang tersisa di Row/Column | Agar widget meregang mengisi sisa ruang |
Flexible | Memberi fleksibilitas ukuran di Row/Column | Membagi ruang secara proporsional |
SizedBox | Kotak dengan ukuran tetap atau spasi | Memberi jarak antar elemen secara eksplisit |
Padding | Memberi spasi di sekeliling widget anak | Untuk memberi ruang napas di dalam kontainer |
Center | Memposisikan anak di tengah parent | Cara cepat menengahkan satu widget |
Card | Panel dengan sudut tumpul dan bayangan | Mengelompokkan informasi terkait dalam satu blok |
Wrap | Otomatis ke baris baru jika tidak muat | Untuk chip/tag yang jumlahnya dinamis |
| Widget | Fungsi | Kapan Digunakan |
|---|
ListView | Daftar item yang bisa di-scroll | Untuk daftar item yang jumlahnya sedikit dan statis |
ListView.builder | Lazy loading list (membangun saat terlihat) | Daftar item yang panjang atau dari API |
GridView | Grid layout yang bisa di-scroll | Galeri foto, katalog produk |
SingleChildScrollView | Scroll untuk satu widget anak | Membuat halaman form atau konten statis jadi scrollable |
ListTile | Baris list standar (ikon, teks, aksi) | Item standar di dalam ListView |
DataTable | Tabel untuk menampilkan data terstruktur | Menampilkan data tabular seperti spreadsheet |
PageView | Halaman yang bisa digeser (swipe) | Untuk onboarding screen atau galeri swipe |
| Widget | Fungsi | Kapan Digunakan |
|---|
Form | Wadah untuk field input | Mengelola validasi dan penyimpanan grup input |
TextFormField | Input teks dengan integrasi Form | Input email, password, dll., dengan validasi |
Checkbox / Radio / Switch | Pilihan biner atau tunggal | Pengaturan, persetujuan syarat, pilihan opsi |
DropdownButton | Tombol dropdown dengan daftar pilihan | Memilih satu item dari banyak opsi |
Slider | Penggeser untuk memilih nilai numerik | Pengaturan volume, kecerahan, rentang harga |
showDatePicker | Fungsi untuk menampilkan dialog tanggal | Untuk input tanggal lahir atau jadwal |
| Widget | Fungsi | Kapan Digunakan |
|---|
Scaffold | Struktur dasar halaman Material Design | Sebagai root dari setiap halaman aplikasi |
AppBar | Bar bagian atas halaman | Menampilkan judul, aksi, dan tombol kembali |
BottomNavigationBar | Tab navigasi di bagian bawah | Pindah antar halaman utama aplikasi (misal: Home, Profile) |
Navigator | Mengelola tumpukan halaman (routes) | Untuk pindah halaman (push) dan kembali (pop) |
TabBar & TabBarView | Membuat tab horizontal | Di bawah AppBar untuk sub-navigasi |
Drawer | Panel navigasi yang muncul dari samping | Menu tersembunyi dengan banyak link navigasi |
| Widget | Fungsi | Kapan Digunakan |
|---|
ElevatedButton | Tombol dengan latar belakang (emphasis) | Untuk aksi utama di halaman (misal: "Simpan", "Login") |
TextButton | Tombol berupa teks tanpa latar belakang | Untuk aksi sekunder (misal: "Batal", "Lupa Password") |
IconButton | Tombol yang hanya berisi ikon | Aksi umum seperti hapus, edit, favorit di dalam list |
FloatingActionButton | Tombol bulat yang "mengambang" | Aksi utama dan kontekstual di halaman (misal: "Tambah") |
GestureDetector | Mendeteksi berbagai gesture (ketuk, geser) | Membuat widget apa pun jadi interaktif |
InkWell | Memberi efek "ripple" saat diketuk | Memberi feedback visual pada interaksi di widget kustom |
| Widget | Fungsi | Kapan Digunakan |
|---|
Image.asset | Menampilkan gambar dari folder assets | Untuk logo, ikon kustom, gambar statis |
Image.network | Menampilkan gambar dari URL | Menampilkan gambar dari internet/API |
FadeInImage | Gambar placeholder saat gambar asli dimuat | Memperhalus pengalaman memuat gambar dari network |
CircleAvatar | Wadah bundar, biasanya untuk gambar | Menampilkan foto profil pengguna |
Placeholder | Kotak silang untuk menandai ruang UI | Saat merancang layout sebelum ada konten final |
| Widget | Fungsi | Kapan Digunakan |
|---|
AlertDialog | Dialog pop-up untuk konfirmasi/informasi | Meminta konfirmasi hapus, menampilkan pesan error |
SnackBar | Notifikasi sementara di bawah layar | Memberi umpan balik singkat (misal: "Item disimpan") |
BottomSheet | Panel yang muncul dari bawah layar | Menampilkan opsi tambahan tanpa pindah halaman |
Tooltip | Menampilkan pesan saat widget ditahan lama | Memberi petunjuk fungsi sebuah ikon/tombol |
CircularProgressIndicator | Indikator loading berputar | Menandakan proses yang sedang berjalan (tanpa progres) |
LinearProgressIndicator | Indikator loading berupa bar horizontal | Menandakan progres unduhan atau unggahan |