Flutter dikenal sebagai framework UI yang cepat dan menyenangkan untuk membangun aplikasi mobile, web, dan desktop dengan satu codebase. Tapi sebelum kamu mulai ngoding besar-besaran, penting banget buat kenal dulu sama yang namanya komponen-komponen Flutter. Di Flutter, komponen ini biasa disebut dengan istilah widget. Jadi, yuk kita kupas satu per satu!
Apa Itu Widget di Flutter?
Singkatnya, segala sesuatu di Flutter adalah widget. Mulai dari tombol, teks, gambar, layout, hingga struktur navigasi—semuanya dibungkus dalam widget. Mirip seperti lego, kamu bisa menyusun berbagai widget ini untuk membentuk tampilan aplikasi sesuai kebutuhanmu.
1. Text
Ini komponen paling dasar buat nampilin teks di layar.
Text('Halo, Flutter!')Kamu bisa kasih style, alignment, dan behavior ke teks ini.
2. Container
Widget serbaguna buat bikin kotak, padding, background, dan semacamnya.
Container(
padding: EdgeInsets.all(16),
color: Colors.blue,
child: Text('Ini dalam Container'),
)3. Row & Column
Dua komponen ini sering banget dipakai buat layout horizontal dan vertikal.
Row(
children: [
Icon(Icons.star),
Text('Rating'),
],
)Column(
children: [
Text('Judul'),
Text('Deskripsi'),
],
)4. Scaffold
Kalau kamu mau bikin tampilan halaman lengkap—dengan AppBar, body, drawer, dan bottom navigation—Scaffold adalah fondasinya.
Scaffold(
appBar: AppBar(title: Text('Beranda')),
body: Center(child: Text('Isi halaman')),
)5. AppBar
Bagian atas layar, biasanya berisi judul, tombol aksi, atau menu.
6. ListView
Kalau kamu butuh tampilan scrollable, ini adalah andalanmu.
ListView(
children: [
ListTile(title: Text('Item 1')),
ListTile(title: Text('Item 2')),
],
)7. Image
Nampilin gambar? Gampang!
Image.asset('assets/logo.png')Bisa juga pakai Image.network() buat load dari internet.
8. ElevatedButton, TextButton, IconButton
Berbagai jenis tombol tersedia, tinggal pilih sesuai UI/UX-mu.
ElevatedButton(
onPressed: () {},
child: Text('Klik Saya'),
)9. TextField
Dipakai buat input teks dari pengguna. Bisa ditambah controller dan validator juga.
10. Navigator & Routing
Untuk berpindah antar halaman, Flutter pakai Navigator:
Navigator.push(
context,
MaterialPageRoute(builder: (context) => HalamanBaru()),
)Bonus: Widget Stateful vs Stateless
- StatelessWidget: UI yang nggak berubah.
- StatefulWidget: UI bisa berubah tergantung state (misalnya: input, klik tombol, dll).
Penutup
Itu dia sekilas tentang komponen-komponen penting yang wajib kamu kenal di Flutter. Semakin kamu sering praktek, makin paham cara nyusunnya dan kombinasi apa aja yang bisa kamu eksplor. Flutter sangat powerful, dan pemahaman komponen dasarnya adalah langkah awal untuk membangun aplikasi yang keren dan performa tinggi.
Next step? Coba bikin layout sederhana sendiri dan eksplor dokumentasi Flutter. Selamat ngoding 🚀
