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

row dan column pada flutter
Contoh disebalah kiri merupakan Colum widget yang mengandung 3 widget, sedangkan pada gambar sebalah kanan merupakan Row widget yang memilik 4 children

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,
        ),
      ),
    ],
  ),
);
contoh penampakan row widget

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,
      ),
    ),
  ],
),
contoh penampakan column widget


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(
       ...
penggunaan align pada row dan column widget flutter


Berikut pilihan mainAxisAlignment beserta keterangannya

ValueKeterangan
MainAxisAlignment.centerMemposisikan widget pada tengah layar
MainAxisAlignment.startMemposisikan widget mengikuti posisi widget pertama
MainAxisAlignment.endMemposisikan widget mengikuti posisi widget terakhir
MainAxisAlignment.spaceEvenlyMemberi jarak antara masing-masing child secara merata pada ruang yang tersedia
MainAxisAlignment.spaceAroundMemberi 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.

orientasi align row
orientasi align column

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

Default image
Omadi Jaya
Fullstack developer, Software Engineer @ Depok, Indonesia

Leave a Reply