09.Flutter - Single Child Layout Widget

Single Child Layout

Sesuai dengan namanya, Widget ini hanya bisa menampung 1 (satu) buah child saja, misalnya : Padding, Container, Card, Expanded, Flexible, Center, GestureDetector, Positioned, SafeArea, SingleChildScrollView, dll.

(untuk lebih lengkap lihat. https://flutter.dev/docs/development/ui/widgets/layout).

Ilustrasi Single Layout Widget

Tidak semua widget akan kita bahas, tujuan dari tutorial ini adalah untuk memberikan pengetahuan tentang konsep Single Child Layout, yaitu hanya 1 Widget saja yang bisa dibungkus (wrapp).

Padding

Padding digunakan untuk memberikan jarak (ruang) atas, bawah, kanan dan kiri dari child widgetnya, untuk memberikan jarak gunakan property padding dengan nilai dari EdgeInsets...(double).

misalnya padding: EdgeInsets.all(16.0) akan memberikan jarak disemua sisi 16.0, padding: EdgeInsets.only(left: 16.0) hanya bagian kiri saja, padding: EdgeInsets.only(left:16.0, right: 16.0) memberikan jarak kiri dan kanan 16.0.

Paddign (
  padding: EdgeInsets...
  child: Widget...
)

Center

Seperti namanya, widget ini digunakan untuk meletakkan childnya di tengah.

Center(
  child: Widget...
)

Expanded

Widget ini digunakan jika kita ingin memenuhi ruang yang ada pada, Misalnya: Row, Column, atau Flex, jika child widget yang menggunakan Expanded lebih dari 1 maka ukurannya akan dibagi sesuai dengan flex factor.

Sebelum Menggunakan Expanded

Setelah Menggunakan Expanded

Expanded(
  child: Widget...
)