Hari 15: Flutter & Widget System

Apa itu Flutter Widget?

Di Flutter, semua adalah Widget. Widget adalah building block UI — mulai dari teks, tombol, layout, hingga seluruh halaman adalah Widget. Flutter menggunakan widget tree (pohon widget) untuk merender UI.

StatelessWidget

Widget yang tidak memiliki state yang berubah — UI-nya statis.

import "package:flutter/material.dart";

class KartuProfil extends StatelessWidget {
  final String nama;
  final String jabatan;
  final String email;

  const KartuProfil({
    super.key,
    required this.nama,
    required this.jabatan,
    required this.email,
  });

  @override
  Widget build(BuildContext context) {
    return Card(
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            CircleAvatar(radius: 40, child: Text(nama[0])),
            Text(nama, style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
            Text(jabatan, style: TextStyle(color: Colors.grey)),
            Text(email),
          ],
        ),
      ),
    );
  }
}

void main() => runApp(MaterialApp(
  home: Scaffold(
    body: Center(
      child: KartuProfil(
        nama: "Budi Santoso",
        jabatan: "Flutter Developer",
        email: "budi@example.com",
      ),
    ),
  ),
));

Widget Dasar

• Text — menampilkan teks
• Container — box dengan padding, margin, decoration
• Row — layout horizontal
• Column — layout vertikal
• Image — menampilkan gambar
• Icon — icon Material Design
• ElevatedButton — tombol dengan elevasi
• Scaffold — struktur halaman dasar
• AppBar — header aplikasi