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