Belajar Row dan Column di Flutter

Row dan Column

Selanjutnya kita akan mempelajari bagaimana cara membuat widget yang kita gunakan berjajar secara vertikal atau horizontal. Lalu apa yang dimaksud dengan membuat widget yang berjajar? Perhatikan gambar berikut:


20200615193337da9cc18beb6419c05d025dc651a4d837.jpeg 
Pada gambar di atas kita memiliki tampilan icon-icon yang merupakan kumpulan tombol, di antaranya share, like dan dislike. Tombol-tombol tersebut tersusun berjajar secara horizontal. 
Nah, untuk membuat berjajar horizontal atau membentuk baris kita menggunakan widget Row. Sedangkan untuk menyusun widget yang membentuk kolom atau vertikal, kita bisa menggunakan widget Column.

Widget Row

Seperti yang dicontohkan sebelumnya, widget Row merupakan suatu widget yang digunakan untuk membuat widget-widget tersusun berjajar secara horizontal. Row memiliki sintaks seperti berikut:


  1. Row(

  2.   children: <Widget>[

  3.     //di sini berisi widget-widget

  4.   ],

  5. )



Untuk membuat widget-widget berjajar secara horizontal kita harus memasukkan widget-widget tersebut ke dalam parameter children. 
Parameter children berisi kumpulan atau list dari widget karena kita dapat menyusun beberapa widget sekaligus di dalamnya. Jika mengacu pada contoh tombol-tombol di atas kodenya seperti berikut:


  1. Row(

  2.   mainAxisAlignment: MainAxisAlignment.spaceEvenly,

  3.   children: <Widget> [

  4.     IconButton(icon: Icon(Icons.share)),

  5.     IconButton(icon: Icon(Icons.thumb_up)),

  6.     IconButton(icon: Icon(Icons.thumb_down)),

  7.   ],

  8. )





Seperti yang kita lihat, kita membuat sebuah IconButton berada di dalam parameter children. Kita menambahkan pula mainAxisAlignment (akan dibahas pada bab lain) yang merupakan parameter alignment pada Row, parameter tersebut memberikan jarak secara merata antar widget-widget yang ada di dalamnya.

20200615193413854d522ae9635ddef73b39277708f37f.jpeg

Widget Column

Kebalikan dari Row, Column merupakan suatu widget yang digunakan untuk membuat widget-widget tersusun berjajar secara vertikal. Column memiliki sintaks mirip dengan Row, seperti berikut:


  1. Column(

  2.   children: <Widget>[

  3.     //di sini berisi widget-widget

  4.   ]

  5. )


Contoh penerapan Column seperti berikut:


  1. Column(

  2.   children: <Widget>[

  3.     Text(

  4.       'Sebuah Judul',

  5.       style: TextStyle(fontSize: 32, fontWeight: FontWeight.bold),

  6.     ),

  7.     Text('Lorem ipsum dolor sit amet'),

  8.   ],

  9. )



Maka akan menghasilkan tampilan seperti berikut:

20200615193505c7892546a782aa0f2a5a31e129c9eee1.jpeg

Kesimpulan

Untuk membuat sebuah widget-widget berjajar kita dapat menggunakan widget Row atau Column. Sebenarnya penggunaan Row dan Column dapat dipadukan sehingga dapat membuat sebuah layout yang kompleks seperti berikut:202006151955516672a62f6d332c620b45752249265c90.png
20200205234120de1d94646ed7fc9d450b0abb543ae326.png
Untuk memahami Row, Column, dan bagaimana menyusun layout dengan Flutter secara mendalam, silakan pelajari dokumentasi berikut:

Komentar

Posting Komentar