Hari 3: Mengenal Widget Dasar di Flutter

Fri, May 2025 14:32:17

Halo teman-teman! Selamat datang kembali di seri belajar Flutter bareng saya. Di hari ketiga ini, kita akan membahas tentang widget dasar yang sering banget dipakai saat ngoding Flutter. Ini penting banget buat kamu yang baru mulai, karena pemahaman tentang widget dasar ini bakal jadi pondasi kamu untuk membangun UI yang lebih kompleks ke depannya.

Widget yang akan kita pelajari hari ini adalah:

• Text
• Container
• Row
• Column
• Image
• Icon

Setelah itu, kita juga bakal eksperimen bikin layout sederhana dengan kombinasi beberapa widget tersebut. Yuk langsung aja kita mulai!

1. Text Widget

Widget Text digunakan untuk menampilkan teks. Ini salah satu widget paling sederhana, tapi juga paling sering digunakan.

Text(
  'Halo, dunia!',
  style: TextStyle(
    fontSize: 24,
    color: Colors.blue,
    fontWeight: FontWeight.bold,
  ),
)

Penjelasan:

• fontSize: ukuran huruf
• color: warna teks
• fontWeight: ketebalan huruf

Kita bisa mengkustomisasi teks sesuai kebutuhan dengan properti-properti lain seperti fontStyle, letterSpacing, dan sebagainya.

2. Container Widget

Widget Container bisa dibilang kayak "wadah serbaguna". Kita bisa kasih padding, margin, warna background, border, dan sebagainya.

Container(
  padding: EdgeInsets.all(16),
  margin: EdgeInsets.only(top: 20),
  color: Colors.amber,
  child: Text('Ini di dalam Container'),
)

Container juga bisa digunakan untuk memberikan lebar dan tinggi tertentu:

Container(
  width: 200,
  height: 100,
  color: Colors.green,
)

3. Row Widget

Widget Row digunakan untuk menampilkan widget anak (children) secara horizontal (sejajar dari kiri ke kanan).

Row(
  children: [
    Icon(Icons.star),
    SizedBox(width: 10),
    Text('Bintang'),
  ],
)

Kita bisa atur alignment-nya dengan mainAxisAlignment dan crossAxisAlignment:

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    Icon(Icons.home),
    Icon(Icons.search),
    Icon(Icons.person),
  ],
)

4. Column Widget

Sama seperti Row, tapi widget Column menyusun anak-anaknya secara vertikal.

Column(
  children: [
    Text('Atas'),
    SizedBox(height: 20),
    Text('Bawah'),
  ],
)

Pengaturan alignment juga mirip:

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Text('Hello'),
    Text('World'),
  ],
)

5. Image Widget

Flutter mendukung gambar dari berbagai sumber: asset lokal, network (internet), dan file.

Dari internet

Image.network('https://flutter.dev/images/flutter-logo-sharing.png')

Dari asset lokal

Pastikan gambar kamu sudah dimasukkan ke dalam folder assets/ dan didaftarkan di pubspec.yaml.

Image.asset('assets/logo.png')

Properti lain yang bisa digunakan:

• width, height
• fit: misalnya BoxFit.cover, BoxFit.contain, dll.

6. Icon Widget

Untuk menampilkan ikon dari Material Design:

Icon(
  Icons.favorite,
  color: Colors.red,
  size: 32,
)

Ada ratusan ikon bawaan yang bisa kamu cek di https://fonts.google.com/icons

Eksperimen Kombinasi Layout Sederhana

Sekarang kita gabungkan semua widget di atas untuk membuat layout sederhana.

Center(
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Container(
        width: 150,
        height: 150,
        decoration: BoxDecoration(
          color: Colors.blue[100],
          borderRadius: BorderRadius.circular(12),
        ),
        child: Image.network('https://flutter.dev/images/flutter-logo-sharing.png'),
      ),
      SizedBox(height: 16),
      Text(
        'Belajar Flutter',
        style: TextStyle(
          fontSize: 20,
          fontWeight: FontWeight.bold,
        ),
      ),
      SizedBox(height: 8),
      Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Icon(Icons.thumb_up, color: Colors.green),
          SizedBox(width: 8),
          Text('Mantap!'),
        ],
      )
    ],
  ),
)

Penjelasan:

• Center: untuk menengahkan layout
• Column: menyusun vertikal
• Container + Image: menampilkan logo Flutter
• Text: judul
• Row: kombinasi ikon dan teks

Kesimpulan

Hari ini kita udah belajar beberapa widget dasar di Flutter:

• Text untuk menampilkan teks
• Container sebagai wadah fleksibel
• Row dan Column untuk menyusun layout horizontal dan vertikal
• Image untuk menampilkan gambar
• Icon untuk menampilkan ikon bawaan

Dengan pemahaman ini, kamu udah punya bekal untuk mulai membangun tampilan yang keren dan dinamis. Jangan ragu buat bereksperimen!

Di hari keempat, kita bakal bahas tentang input dan form, seperti TextField, Button, dan cara mengambil nilai dari input user. Stay tuned ya!

Sampai jumpa besok!

Semangat belajar, jangan lupa ngopi! ☕