Pengenalan Container

 Bagaimana sejauh ini? Semoga materinya dapat Anda praktikkan dengan mulus ya.

Pada bagian sebelumnya kita mempelajari widget Scaffold. Kini saatnya belajar tentang widget Container. Container adalah widget yang digunakan untuk melakukan styling, membuat sebuah shape (bentuk), dan layout pada widget child-nya. Sebagai contoh:

Container(
  color: Colors.blue,
  child: const Text(
    'Hi', 
    style: TextStyle(fontSize: 40),
  ),
),

Pada kode di atas kita membuat sebuah Text "Hi" yang dibungkus oleh widget Container dan kita beri parameter color dengan nilai Colors.blue. Kita letakkan Container di dalam parameter body Scaffold. Apa hasilnya? Text "Hi" akan memiliki background berwarna biru. Jalankan project Anda untuk menampilkan hasil seperti berikut:

Width & Height

Kita dapat mengatur lebar (width) dan tinggi (height) suatu Container seperti berikut:

Container(
  color: Colors.blue,
  width: 200,
  height: 100,
  child: const Text(
    'Hi', 
    style: TextStyle(fontSize: 40),
  ),
),

Kode di atas ketika dijalankan hasilnya akan seperti berikut:

 

Padding & Margin

Container menyediakan padding & margin. Padding merupakan jarak antara konten (child) dengan Container, sedangkan margin merupakan jarak antara Container dengan bagian luar container.

Penggunaan padding adalah seperti berikut:

Container(
  color: Colors.blue,
  padding: const EdgeInsets.all(10),
  child: const Text(
    'Hi', 
    style: TextStyle(fontSize: 40),
  ),
),

Pada kode di atas kita menambahkan padding pada semua sisi container secara merata dengan nilai 10. Maka jika me-refresh aplikasi flutter, akan ada jarak antara Text "Hi" dengan batas (border) dari container.

Lalu penggunaan margin pun sama seperti halnya padding, maka contoh kodenya seperti berikut:

Container(
  color: Colors.blue, 
  margin: const EdgeInsets.all(10), 
  child: const Text(
    'Hi', 
    style: TextStyle(fontSize: 40),
  ),
),

Maka hasil dari kode di atas Container akan bergeser lebih ke dalam karena ada jarak antara Container dengan bagian luar Container.