1. Pendahuluan

Flutter adalah framework UI open-source yang dikembangkan oleh Google untuk membuat aplikasi mobile, web, dan desktop dengan satu basis kode. Salah satu konsep terpenting dalam Flutter adalah widget. Hampir semua hal yang kita lihat di layar aplikasi Flutter adalah widget, mulai dari teks, gambar, tombol, hingga tata letak.

Dengan memahami widget dasar, kita bisa membangun tampilan aplikasi yang menarik dan fungsional. Artikel ini akan membahas konsep widget, perbedaan StatelessWidget dan StatefulWidget, serta contoh penggunaannya dalam membangun aplikasi sederhana.

2. Konsep Widget di Flutter

Di Flutter, widget adalah elemen dasar yang menyusun antarmuka aplikasi. Widget bisa berupa:

• Visual element seperti Text, Icon, Image.
• Layout element seperti Row, Column, Container.
• Interactive element seperti FloatingActionButton.

Setiap widget dapat berisi widget lain (disebut child), sehingga membentuk pohon widget (widget tree).

3. StatelessWidget vs StatefulWidget

3.1 StatelessWidget

• Digunakan untuk tampilan statis yang tidak berubah selama aplikasi berjalan.
• Contoh: teks statis, ikon, atau gambar.
• Tidak memiliki state (keadaan internal).

class MyTextWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text("Halo, saya StatelessWidget!");
  }
}

3.2 StatefulWidget

• Digunakan untuk tampilan yang dinamis dan bisa berubah ketika ada interaksi.
• Memiliki objek State untuk menyimpan data yang bisa diubah.
• Contoh: tombol yang bisa menambah angka ketika ditekan.

class MyCounterWidget extends StatefulWidget {
  @override
  _MyCounterWidgetState createState() => _MyCounterWidgetState();
}

class _MyCounterWidgetState extends State<MyCounterWidget> {
  int counter = 0;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text("Angka: $counter"),
        ElevatedButton(
          onPressed: () {
            setState(() {
              counter++;
            });
          },
          child: Text("Tambah"),
        ),
      ],
    );
  }
}

4. Widget Dasar yang Sering Digunakan

4.1 Text

Text("Halo Flutter!", style: TextStyle(fontSize: 20, color: Colors.blue))

4.2 Icon

Icon(Icons.star, color: Colors.yellow, size: 40)

4.3 Image

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

4.4 Row dan Column

1. Row: menampilkan widget secara horizontal.
2. Column: menampilkan widget secara vertikal.

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Icon(Icons.home),
    Text("Beranda"),
  ],
)

4.5 Container

Untuk Styling dan Dekorasi

Container(
  padding: EdgeInsets.all(10),
  margin: EdgeInsets.all(10),
  color: Colors.amber,
  child: Text("Ini container"),
)

4.6 Center, Padding, Sized Box

Center(
  child: Padding(
    padding: EdgeInsets.all(16),
    child: SizedBox(
      width: 200,
      height: 50,
      child: ElevatedButton(
        onPressed: () {},
        child: Text("Tombol"),
      ),
    ),
  ),
)

4.7 Scaffold, AppBar, FloatingActionButton

Scaffold adalah kerangka dasar layar aplikasi.

Scaffold(
  appBar: AppBar(title: Text("Aplikasi Flutter")),
  body: Center(child: Text("Halo dunia!")),
  floatingActionButton: FloatingActionButton(
    onPressed: () {},
    child: Icon(Icons.add),
  ),
)

5. Membuat Tampilan Sederhana (Aplikasi Biodata)

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("Kartu Profil")),
        body: Center(
          child: Container(
            padding: EdgeInsets.all(20),
            decoration: BoxDecoration(
              color: Colors.blue[50],
              borderRadius: BorderRadius.circular(10),
              boxShadow: [BoxShadow(blurRadius: 5, color: Colors.grey)],
            ),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                CircleAvatar(
                  radius: 50,
                  backgroundImage: NetworkImage(
                    "https://i.pravatar.cc/300",
                  ),
                ),
                SizedBox(height: 10),
                Text("Viona Rhema",
                    style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold)),
                Text("Flutter Developer",
                    style: TextStyle(color: Colors.grey[700])),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Icon(Icons.phone, color: Colors.green),
                    SizedBox(width: 5),
                    Text("+62 8123456789"),
                  ],
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

6. Kesimpulan

Widget adalah elemen inti di Flutter, di mana semua tampilan aplikasi dibangun dari widget. Dengan memahami perbedaan StatelessWidget dan StatefulWidget, serta mempelajari widget dasar seperti Text, Image, Row, Column, Container, dan Scaffold, kita bisa mulai membuat aplikasi sederhana.

Latihan dengan setState membantu memahami bagaimana data dan tampilan saling berhubungan. Dengan penguasaan widget dasar ini, kita bisa melangkah ke tahap berikutnya: membangun aplikasi Flutter yang lebih kompleks dan interaktif.