Widget Dasar: Text, Icon & Container

Text dan TextStyle

Widget Text menampilkan tulisan. Ukuran, ketebalan, dan warna diatur lewat style berisi TextStyle:

Text(
  'Belajar Flutter',
  style: TextStyle(
    fontSize: 24,
    fontWeight: FontWeight.bold,
    color: Colors.teal,
  ),
)

Colors.teal, Colors.red, dan teman-temannya adalah warna siap pakai. Untuk versi lebih muda/tua, tambahkan angka: Colors.teal.shade50 (sangat muda) sampai shade900 (sangat tua).

Icon

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

Flutter menyediakan ratusan ikon bawaan di Icons (Icons.home, Icons.search, Icons.person, dan seterusnya).

Container: kotak serba guna

Container adalah kotak yang bisa diberi jarak dalam, warna, ukuran, dan bentuk. Ibarat kotak kado yang bisa kamu atur ukuran, warna, dan sudutnya.

Container(
  padding: const EdgeInsets.all(16),
  decoration: BoxDecoration(
    color: Colors.teal.shade50,
    borderRadius: BorderRadius.circular(12),
  ),
  child: const Text('Halo'),
)

• padding — jarak antara tepi kotak dan isinya. EdgeInsets.all(16) = 16 di semua sisi. Ada juga EdgeInsets.symmetric(horizontal: 12, vertical: 8).
• decoration — tampilan kotak: color (warna latar), borderRadius (sudut membulat), border, bayangan, dll.
• child — isi kotak.

Catatan: kalau kamu hanya butuh warna, boleh memakai color: langsung di Container. Tetapi bila memakai decoration, warna harus ditaruh di dalam BoxDecoration, tidak keduanya.

Satuan ukuran Flutter adalah logical pixel; angkanya tidak perlu ditulis satuan.