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...
)
09.Flutter - Single Child Layout Widget  09.Flutter - Single Child Layout Widget Reviewed by jc on September 06, 2019 Rating: 5

No comments:

Powered by Blogger.