Belajar Layouting (Row, Column, Stack) pada Flutter

Halo guys, kemarin kan sudah belajar tentang dasar dari Pemrograman Dart sama pengenalan Framework Flutter nih. Nah, kali ini kita akan masuk lebih dalam ke Flutter, khususon bagian layouting yak…

Sebelum masuk ke pembahasan, alangkah lebih baik kita mengetahui apa itu layouting. Layout merupakan tata letak elemen dari aplikasi yang akan kita kembangkan. Jadi, layouting itu adalah proses kita menyusun atau menempatkan elemen dari aplikasi yang akan kita kembangkan sesuai design yang sudah dibuat

Pada Flutter terdapat 2 tipe layout, yaitu Single-child layout dan multi-child layout. Bedanya apa sih?

• Single-child layout, merupakan widget yang hanya dapat menampung satu child aja didalamnya
• Multi-child layout, merupakan widget yang bisa menampung banyak child didalamnya

Nah biar lebih paham, langsung masuk aja ke pembahasan. Kita akan mempelajari multi-child layoutnya yak..

Row

merupakan widget yang digunakan untuk menampilkan children secara horizontal. Sifat widget ini adalah multi-child, yaitu bisa menampung banyak child didalamnya. Berikut contohnya:

Seperti contoh diatas, Row bisa menampung banyak child. Disini Text berperan sebagai child atau elemen yang ada didalam Row. Jika dijalankan, maka hasilnya akan tampak seperti dibawah ini:

Column

Nah, kalo Column ini merupakan kebalikan dari Row. Kalau Row menampilkan child di dalamnya secara medatar atau horizontal, maka Column akan menampilkannya secara menurun atau vertical. Berikut contohnya:

Seperti Row, widget Column juga bersifat multi-child atau bisa menampung banyak child didalamnya. Berikut ketika dijalankan:

Stack

kalo Stack ini adalah widget yang akan menyusun child didalamnya secara menumpuk ya. Semisal Stack mempunyai child A dan child B, maka child tersebut akan saling bertumpukan. Source codenya seperti berikut:

Pada source code diatas, Stack mempunyai 2 Child yaitu Container dengan lebar dan tinggi 200px dengan warna Orange dan Biru ya. Namun pada Container berwarna Biru diberikan margin kanan, kiri, atas, dan bawah sebesar 32px agar terlihat proses Stacking nya. Kalau dijalankan akan menjadi seperti ini:

Nahh mungkin itu aja ya pembahasan mengenai layouting kali ini. Semoga ilmunya bermanfaat, jika ada kesulitan bisa tulis di komentar yak. Have a nice day 🤩