Flutter

Mengelompokkan Berbagai Widget dengan Row

Hallo teman”, kali ini kita akan membahas tentang Flutter lagi nih. Jika sebelumnya kita membahas tentang Column, kali ini kita akan coba...

Ikhwan Written by Ikhwan · 1 min read >

Hallo teman”, kali ini kita akan membahas tentang Flutter lagi nih. Jika sebelumnya kita membahas tentang Column, kali ini kita akan coba bahas tentang Row.

Row sendiri tidak jauh berbeda dengan widget Column. Perbedannya hanya lah di axis. Jika column memiliki axis vertical, maka row memiliki axis horizontal. Jadi dengan row kita dapat menyusun childnya secara horizontal. Terdapat beberapa property yang dapat digunakan pada widget ini. Kita coba bahas satu-satu ya.

Pada android native, widget Row memiliki fungsi seperti Linear Layout dengan orientation horizontal

1. mainAxisAlignment

Jika pada widget column main axis memiliki makna vertical, pada widget row memiliki makna horizontal. Terdapat beberapa value yang bisa digunakan seperti berikut:

  • MainAxisAlignment.start, value ini akan membuat child tersusun dari bagian kiri widget parent
  • MainAxisAlignment.center, value ini akan membuat child tersusun dan berkumpul pada bagian tengah horizontal dari widget parent
  • MainAxisAlignment.end, value ini akan membuat child tersusun dan berkumpul pada bagian kanan widget parent
  • MainAxisAlignment.spaceBetween, value ini akan memberikan space atau jarak yang sama di antara setiap widget. Tidak ada space dari child ke parent widget
  • MainAxisAlignment.spaceAround, value ini akan memberikan space atau jarak yang sama di antara setiap widget dan setengah space untuk bagian kiri dan kanan widget.
  • MainAxisAlignment.spaceEvenly, value ini akan memberikan space atau jarak yang sama baik pada bagian kiri, kanan, maupun di antara widget

2. crossAxisAligment

Cross axis tentu memilki makna berlawanan dari main axis. Pada row, cross axis berarti sumbu vertical. Terdapat beberapa value yang bisa digunakan untuk properti ini, seperti berikut:

  • CrossAxisAlignment.start, value ini akan membuat child ditampilkan pada sisi bagian atas widget parent.
  • CrossAxisAlignment.end, value ini akan membuat child ditampilkan mulai pada bagian bawah widget parent.
  • CrossAxisAlignment.center, value ini akan membuat child berada pada bagian tengah vertical dari widget parent.
  • CrossAxisAlignment.baseline, value ini akan menyesuaikan ketinggian yang dimiliki oleh child. Misalkan terdapat satu widget yang memiliki ketinggian 180 sebagai widget tertinggi diantara widget lainnya, maka widget lainnya akan berada di tengah secara horizontal dari ketinggian tersebut.
  • CrossAxisAlignment.stretch, value ini akan memaksa child memiliki tinggi dari sisi atas hingga sisi bawah widget parent.

3. mainAxisSize

Sesuai dengan penjelasan sebelumnya, main axis berarti sumbu horizontal.

  • MainAxisSize.min, akan membuat widget row memiliki lebar minimal.
  • MainAxisSize.max, akan membuat widget row memiliki lebar maximal sesuai dengan widget parentnya.

4. textDirection

Properti ini memiliki peran untuk menentukan child dimulai dari sisi kiri atau kanan. Seperti halnya tulisan indonesia yang dimulai dari sisi kiri, dan tulisan arab yang dimulai dari sisi kanan.

  • TextDirection.ltr, memiliki arti penulisan dimulai dari sisi kiri ke kanan
  • TextDirection.rtl, memiliki arti penulisan dimulai dari sisi kanan ke kiri

#Demo

Dengan penjalasan sebelumnya mungkin masih agak membingungkan ya, silahkan melakukan experiment dengan menggunakan sample berikut ini. Teman-teman juga bisa copas codenya. Disini saya menggunakan codepen sebagai media untuk demo.

  • Jika terdapat permasalahan pada demo, silahkan mengunjungi link berikut untuk mencoba demonya langsung. https://codepen.io/ikhwansi13/pen/oNxYOKP
  • Click button Flutter untuk melihat code yang digunakan
  • Click icon setting untuk melakukan pengaturan pada properti

Nah sekian dulu untuk tulisan kali ini. Semoga membantu ya, dan jangan lupa untuk tepuk tangan, dan dishare ya. Hal tersebut sangat berarti bagi mimin. 😀

Oh ya, blog ini juga punya tulisan menarik lainnya loh, baik itu tentang flutter maupun hal lainnya. Terimakasih 😀

Menggunakan Google Map di Flutter

Ikhwan in Flutter
  ·   2 min read

Cara untuk Migrasi ke Flutter 2

Ikhwan in Flutter
  ·   2 min read

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *