Container: Widget Serbaguna

Apa itu Container?

Container adalah widget pembungkus serbaguna. Ia bisa memberi warna background, padding, margin, border, border radius, shadow, dan ukuran, semuanya dalam satu widget. Anggap ia seperti div di HTML yang bisa di-styling habis-habisan.

Container(
  width: 200,
  height: 100,
  padding: const EdgeInsets.all(16),
  margin: const EdgeInsets.symmetric(vertical: 8),
  decoration: BoxDecoration(
    color: Colors.teal,
    borderRadius: BorderRadius.circular(12),
    boxShadow: [
      BoxShadow(
        color: Colors.black.withOpacity(0.2),
        blurRadius: 8,
        offset: const Offset(0, 4),
      ),
    ],
  ),
  child: const Text(
    'Kartu sederhana',
    style: TextStyle(color: Colors.white),
  ),
)

Aturan color vs decoration

Satu aturan yang sering menjebak pemula: kamu tidak boleh mengisi color dan decoration sekaligus. Kalau butuh warna plus border radius, taruh warna di dalam BoxDecoration(color: ...).

Container(
  decoration: BoxDecoration(
    color: Colors.red,
    borderRadius: BorderRadius.circular(8),
    border: Border.all(color: Colors.red.shade900, width: 2),
  ),
  child: const Padding(
    padding: EdgeInsets.all(12),
    child: Text('Merah dengan border', style: TextStyle(color: Colors.white)),
  ),
)

Menulis Container(color: Colors.red, decoration: BoxDecoration(...)) akan error saat runtime, jadi biasakan pola di atas.

Ukuran Container

Tanpa width dan height, Container akan mengikuti ukuran child-nya, atau mengisi ruang yang tersedia dari parent jika child-nya null. Properti constraints bisa memberi batas min/max yang lebih fleksibel daripada ukuran kaku:

Container(
  constraints: const BoxConstraints(minWidth: 100, maxWidth: 300, minHeight: 50),
  color: Colors.amber,
  child: const Text('Lebar fleksibel'),
)

Ini berguna untuk bubble chat atau kartu yang lebarnya menyesuaikan isi tapi tidak boleh terlalu lebar.

Catatan teknis: Container sebenarnya adalah gabungan beberapa widget sederhana (Padding, DecoratedBox, ConstrainedBox, dan lain-lain). Untuk widget yang sangat sering direbuild seperti item list ribuan baris, memakai Container polos tanpa dekorasi tetap murah, tapi kalau hanya butuh padding, pakai Padding langsung lebih jujur dan sedikit lebih hemat. Jangan overthinking di awal, tapi pahami bahwa Container bukan widget "murah" secara konseptual.