Flutter

Mengelompokkan Berbagai Widget dengan Column

Hallo teman”, kali ini kita akan membahas tentang Flutter. Dalam sebuah tampilan tentu kita akan mengelompokkan beberapa tampilan. Dan untuk kali ini...

Ikhwan Written by Ikhwan · 1 min read >

Hallo teman”, kali ini kita akan membahas tentang Flutter. Dalam sebuah tampilan tentu kita akan mengelompokkan beberapa tampilan. Dan untuk kali ini kita akan membahas tentang Column (pada sesi lainnya kita juga akan bahas widget lainnya yang memiliki fungsi untuk mengelompokkan/group). Nah jadi apa itu Column?

Column tentunya juga merupakan sebuah widget. Widget ini akan menampilkan childnya secara vertical. Terdapat beberapa property yang sering digunakan pada widget ini. Kita bahas satu-satu ya

1. mainAxisAlignment

Property berperan untuk mengatur aligment pada main axis. Pada widget column, main axis berarti sumbu vertical. Karena widget ini memang memiliki peran untuk menyusun childnya secara vertical.

Terdapat beberapa value yang bisa dipakai pada property ini, seperti berikut:

  • MainAxisAlignment.start, value ini akan membuat child tersusun dari bagian atas parent widget
  • MainAxisAlignment.center, value ini akan membuat child tersusun dan berkumpul pada bagian tengah vertical dari parent widget
  • MainAxisAlignment.end, value ini akan membuat child tersusun dan berkumpul pada bagian bawah parent widget
  • 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 atas dan bawah widget.
  • MainAxisAlignment.spaceEvenly, value ini akan memberikan space atau jarak yang sama baik pada bagian atas, bawah, maupun di antara widget

2. crossAxisAligment

Jika main axis memiliki makna untuk sumbu vertical, cross axis berarti kebalikannya, yaitu sumbu horizontal. Terdapat beberapa value yang bisa digunakan untuk properti ini, seperti berikut:

  • CrossAxisAlignment.start, value ini akan membuat child ditampilkan mulai dari sisi bagian kiri parent widget
  • CrossAxisAlignment.end, value ini akan membuat child ditampilkan mulai dari sisi bagian kanan parent widget
  • CrossAxisAlignment.center, value ini akan child berada pada bagian tengah horizontal dari parent widget
  • CrossAxisAlignment.baseline, value ini akan menyesuaikan lebar yang dimiliki oleh child
  • CrossAxisAlignment.stretch, value ini akan memaksa child memiliki lebar dari sisi kiri hingga sisi kanan widget

3. mainAxisSize

Sesuai dengan penjelasan sebelumnya, main axis berarti sumbu vertical.

  • MainAxisSize.min, akan membuat widget column memiliki ketinggian minimal.
  • MainAxisSize.max, akan membuat widget column memiliki ketinggian maximal sesuai dengan parent widgetnya.

4. verticalDirection

Properti ini untuk menentukan dari mana widget child mulai disusun.

  • VerticalDirection.up, akan membuat widget child tersusun dari bawah ke atas
  • VerticalDirection.down, akan membuat widget child tersusun dari atas ke bawah

5. textDirection

Properti ini memiliki peran untuk menentukan text child dimulai dari sisi kiri atau kanan. Seperti halnya tulisan indonesia yang dimulai dari sisi kiri, dan tulisan arab yang dimulai dari sisi kanan. Penggunaan ini juga memiliki efek untuk memutar balikkan nilai pada value crossAxisAligment

  • 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/vYGyJvv

* 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 😀

Cara untuk Migrasi ke Flutter 2

Ikhwan in Flutter
  ·   2 min read

Tinggalkan Balasan

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