Image Load

Hello world,

Dalam mendesain aplikasi kita sering menemukan keadaan dimana kita harus menambahkan padding atau margin. Padding adalah jarak atauu ruang yang berada di antara border dan konten. Sedangkan margin adalah jarak atau ruang yang berada atau dihitung dari border ke arah luar atau jarak antara border dan konten yang berada di luar border.

Sebelumnya saya pernah menulis tentang penggunaan padding yang akan kembali saya bahas dan ada beberapa tambahan. Lansung saja kita masuk ke contoh pertama.

Mengatur padding

Cara pertama kita bisa menggunakan Widget Padding, dimana widget ini akan mengatur padding untuk widget yang ada di dalamnya.

Padding(
  padding: EdgeInsets.all(8.0),
  child: const Card(child: Text('Hello World!')),
)

Pada contoh di atas akan menghasilkan padding di semua sisi yaitu atas, kanan, bawah dan kiri. Contoh lain bisa seperti berikut.

Padding(
  padding: EdgeInsets.fromLTRB(8.0, 5.0, 5.0, 4.0),
  child: const Card(child: Text('Hello World!')),
)

Pada contoh di atas akan menghasilkan padding di semua sisi dengan urutan kiri (L), atas (T), kanan (R), bawah (B).

Contoh lain untuk mengatur pada sisi tertentu saja bisa seperti berikut.

Padding(
  padding: EdgeInsets.only(left:8.0, right:8.0),
  child: const Card(child: Text('Hello World!')),
)

Pada contoh di atas akan menghasilkan padding hanya pada sisi yang kita sebutkan saja. Seperti pada contoh saya hanya menyebut left dan right. Selain menggunakan widget Padding kita juga bisa menggunakan widget container seperti berikut.

Container(
  padding: EdgeInsets.only(left:8.0, right:8.0),
  child: const Card(child: Text('Hello World!')),
)


Mengatur Margin

Untuk margin kita bisa menggunakannya pada widget container dikarenakan tidak ada widget khusus untuk margin seperti yang dimiliki padding. Sehingga penggunaannya akan seperti berikut.

Container(
  margin: EdgeInsets.all(8.0),
  child: const Card(child: Text('Hello World!')),
)


Untuk melihat contoh lain penggunaan EdgeInsets bisa dilihat di sini.


Selamat mencoba :)