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
Pada image gambaran Column dan Row widget sepertinya terbalik pak
Terimakasih atas koreksinya 🙂
Kalau terbalik ya tolong segera dikoreksi, kasian yg lain baca dari website anda jadi salah arah