Komponen-Komponen Flutter yang Perlu Kamu Tahu

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.

AppBar(
  title: const Text('Profil'),
  centerTitle: true,
  backgroundColor: Colors.green,
  elevation: 4,
);

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.

TextEditingController nameController = TextEditingController();

TextField(
  controller: nameController,
  decoration: InputDecoration(
    labelText: 'Nama Lengkap',
    border: OutlineInputBorder(),
  ),
);

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 🚀