Didalam flutter tentu kita bakalan sering menggunakan widget row dan column ini. Untuk pemahaman terhadap widget column dan row akan saya jelaskan pada berikut ini :
Widget Row
Widget row akan menyusun komponen-komponen yang terdapat didalamnya dengan sususnan horizontal. Perhatikan pada gambar dibawah ini :
text 1, text 2, text 3, text 4 terletak pada posisi secara horizontal/mendatar. untuk mengatur tersebut dibungkus dengan menggunakan widget row. Untuk memasukan text tersebut kedalam widget row kita dapat menggunakan kode berikut :
Row(
children: <Widget>[
// Komponen 1,
// Komponen 2,
// Komponen 3,
// Komponen 4,
],
didalam childrennya kita dapat memasukan beberapa widget sekaligus, dikarenakan didalam children dibungkus menggunakan array.
contoh pada aplikasi dapat menggunakan source code berikut ini :
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Latihan ROW"),
),
body: Row(
children: <Widget>[
Text("Text 1"),
Text("Text 2"),
Text("Text 3"),
Text("Text 4")
],
),
),
);
}
}
Hasil dari source code tersebut adalah :
terlihat text 1 text 2 text 3 text 4 tersusun secara mendatar, kita juga dapat mengatur tata letak widget tersebut, disini kita akan mengatur tata letak komponen yang ada ke tengah. Pada widget row/ column itu sendiri ada namanya properti yang namanya mainAxisAlignment , properti ini tertugas untuk mengatur tata letak widget, jika kita ingin mengatur tata letaknya ke tengah kita dapat menggunakan code berikut
mainAxisAlignment: MainAxisAlignment.center,
kalau kita melakukan pemasangan properti ini kedalam widget row/column maka letak widget tersebut akan berada di tengah-tengah. sedangkan untuk mainAxisAlignment itu sendiri memiliki beberapa method dapat dilihat pada gambar berikut ini :
Method yang ada didalam mainAxisAlignment tersebut memiliki fungsi sebagai berikut :
center
berfungsi untuk mengatur tata letak ketengah
end
berfungsi untuk memposisikan komponen pada bagian ujung posisi utama, kanan untuk baris, bawah untuk kolom
spaceAround
hampir miri dengan spaceEvenly, tetap[i mengurani setengah dari ruang sebelum komponen pertama dan setelah komponen terakhir menjadi setengah dari lebar setiap komponen
spaceBetween
berfungsi untuk membagi ruang secara merata pada setiap komponen
spaceEvenly
berfungsi untuk memberikan jarak antar kompen
start
berfungsi untuk memposisikan komponen pada bagian permulaan posisi utama, Kiri untuk baris, atas untuk kolom
pada contoh dapat kita lihat pada source code berikut :
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Latihan ROW"),
),
body: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text("Text 1"),
Text("Text 2"),
Text("Text 3"),
Text("Text 4")
],
),
),
);
}
}
Hasil :
jika methodnya saya ganti menjadi spaceEvenly maka hasilnya adalah :
sekarang silahkan coba dari setiap method yang ada.
Widget Column
widget column ini sama dengan widget row, hanya pemanggilannya saja yang berbeda. pada widget column ini, akan memposisikan komponen secara vertikal. kita lihat pada code berikut :
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Latihan Column"),
),
body: Column(
children: <Widget>[
Text("Text 1"),
Text("Text 2"),
Text("Text 3"),
Text("Text 4")
],
),
),
);
}
}
Hasilnya
jika kita berikan properti mainAxisAlignment center, maka hasilnya akan seperti ini :
begitu juga dengan method mainAxisAlignment yang lainnya.
Sekarang kita sudah memahami bagaimana widget row dan column tersebut digunakan, mungkin timbul pertanyaan, apakah bisa row dan column tersebut digabungkan ?
jawabannya : tentu itu bisa kita gabungkan. caranya cukup mudah kita mau mengabungkan column ke dalam row atau row kedalam column ?
pada contoh ini saya akan mengabungkan row ke dalam column :
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Latihan Column"),
),
body: Column(
children: [
Text("Text 1"),
Text("Text 2"),
Text("Text 3"),
Text("Text 4"),
Row(
children: [
Text("Text 5"),
Text("Text 6"),
Text("Text 7"),
Text("Text 8")
],
)
],
),
),
);
}
}
Hasilnya
pada contoh code tersebut, kita sudah dapat memasukan row kedalam column, bagaimana cukup mudah bukan. Disini kita sudah mempelajari 2 buah widget row dan column.
