Flutter Widget: Row dan Column Pada Flutter

Setelah sebelumnya kita mempelajari tentang Text dan Container widget, kini kita akan coba fokus mempelajari tentang penggunaan row dan column pada flutter. Row dan column widget berfungsi untuk mengatur tata letak atau layout widget lainnya dalam sebuah aplikasi flutter. Apabila anda pernah menggunakan excel atau membuat suatu table, maka seperti itulah konsep row dan column pada flutter.

Row widget adalah widget yang digunakan untuk memposisikan widget-widget lainnya secara horizontal. Sedangkan column widget digunakan untuk menempatkan widget secara menurun atau vertical. Jika anda terbiasa dengan XML android maka Row dan column seperti LinearLayout.

Row dan Column pada flutter widget merupakan tipe multiple children widget atau widget yang dapat memiliki lebih dari satu turunan widget.

Berikut gambaran perbedaan dari Column row widget

Penggunaan Row & Column Widget

Mesikpun row widget menempatkan childrennya secara horizontal namun widget ini TIDAK bisa scrolling. Jadi apabila row widget telah melebihi ukuran layar akan muncul error overflow. Jika ingin membuat layout horizontal yang dapat di scroll maka gunakan ListView.

Berikut contoh code penggunaan Row widget

return Scaffold(
  appBar: AppBar(
    title: Text("Belajar Layout"),
  ),
  body: Row(
    children: [
      Container(
        color: Colors.greenAccent,
        child: FlutterLogo(
          size: 60.0,
        ),
      ),
      Container(
        color: Colors.orangeAccent,
        child: FlutterLogo(
          size: 60.0,
        ),
      ),
      Container(
        color: Colors.purpleAccent,
        child: FlutterLogo(
          size: 60.0,
        ),
      ),
    ],
  ),
);

Pada contoh kode diatas, dalam satu Row memiliki 3 buah container dimana container akan menampilkan warna background yang berbeda dengan logo flutter di dalamnya.

Sekarang kita coba Column widget, masih dengan kode yang hampir sama namun kita rubah Row menjadi column kodenya seperti dibawah ini :

body: Column(
  children: [
    Container(
      color: Colors.greenAccent,
      child: FlutterLogo(
        size: 60.0,
      ),
    ),
    Container(
      color: Colors.orangeAccent,
      child: FlutterLogo(
        size: 60.0,
      ),
    ),
    Container(
      color: Colors.purpleAccent,
      child: FlutterLogo(
        size: 60.0,
      ),
    ),
  ],
),

mainAxisAlignment

mainAxisAlignment merupakan properti yang dimiliki oleh row dan column yang berfungsi untuk mengatur posisi widget di dalamnya. Contoh penggunaan mainAxisAlignment pada column dan row widget :

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    Container(
       ...

Column(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    Container(
       ...

Berikut pilihan mainAxisAlignment beserta keterangannya

Value	Keterangan
MainAxisAlignment.center	Memposisikan widget pada tengah layar
MainAxisAlignment.start	Memposisikan widget mengikuti posisi widget pertama
MainAxisAlignment.end	Memposisikan widget mengikuti posisi widget terakhir
MainAxisAlignment.spaceEvenly	Memberi jarak antara masing-masing child secara merata pada ruang yang tersedia
MainAxisAlignment.spaceAround	Memberi jarak antar widget secara merata namun hanya memberikan setengah jarak pada awal dan akhir widget

Mengapa pada table diatas disebutkan awal widget bukan kiri layar ? Itu karena orientasi pada column dan row berbeda.

Sumber :

https://flutter.dev/docs/development/ui/layout
https://api.flutter.dev/flutter/widgets/Row-class.html
https://api.flutter.dev/flutter/widgets/Column-class.html