void main() {
runApp(MyApp());
}
Dengan berhasil menampilkan sebuah teks bertuliskan :
"Hi! Belajar Flutter bersama s.id/blog-coding"
Ada pertanyaan nih...
"Saya ingin agar tulisan tersebut ada di tengah, bagaimana caranya!?"
Yuk mari kita pelajari lebih dalam!
Projek kita sebelumnya, langsung fokus ke bagian kode :
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text("Belajar Flutter"),
),
body: const Text("Hi! Belajar Flutter bersama s.id/blog-coding"),
),
Pada baris kode widget Scaffold, telah kita bahas sebelumnya. Memiliki beberapa properti, salah satunya yaitu properti "body :".
Dalam properti inilah semua hal yang berkaitan dengan user interface akan ditampilkan kepada user. Contohnya adalah hasil dari kode tersebut menampilkan tulisan kan ? Nah, sekarang mari kita ubah kodenya dengan membungkus widget Text() dengan widget lain, yaitu Center(). Baris kode kita akan berubah menjadi :
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text("Belajar Flutter"),
),
body: const Center( // membungkus Text dengan Center
child: Text("Hi! Belajar Flutter bersama s.id/blog-coding"),
),
),
);
Bagaimana ya hasilnya, mari langsung kita jalankan saja dengan perintah flutter run
Bagaimana, apakah bisa melihat perbedaanya?
body: const Center(
child: Text("Hi! Belajar Flutter bersama s.id/blog-coding"),
),
Dengan membungkus widget Text() dengan widget Center(), kita memberikan instruksi bahwa posisi teks nantinya margin kanan-kiri-atas-bawah semuanya simetris. Semua bentuk atau hal dalam flutter adalah widget, maka dari itu kita bisa mengisi sebuah widget dengan widget kembali dengan syarat widget yang ingin ditampung diletakkan di dalam properti child atau children.
children akan kita bahas pada artikel lain waktu
Selain dengan widget Center(), kita juga bisa menggunakan widget yang dinamakan dengan Row(). Bentuk penggunaannya yaitu :
body: const Row(
children: [
],
)
Letakkan widget teks kita di tengah-tengah tanda kurung [ ] yang dimiliki oleh properti children. Kode kita menjadi :
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text("Belajar Flutter"),
),
body: const Row(
children: [
Text("Hi! Belajar Flutter bersama s.id/blog-coding"),
],
)
),
);
Tampilannya akan sama seperti pada awal kita belum menggunakan widget Center() :
Bedanya dengan membungkus teks dengan widget
Row() adalah kita bisa mengatur posisi menjadi rata kiri tapi tetap di posisi atas dengan properti
mainAxisAlignment, contoh :
body: const Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Text("Hi! Belajar Flutter bersama s.id/blog-coding"),
],
)
Sampai sini paham tentang alasan menggunakan bungkus widget Center() atau Row() ?
Ya karena dengan tidak menggunakan widget lain, maka posisi UI aplikasi kita akan stuck dengan posisi standar bawaan flutter. Maka dari itu mengetahui tentang widget-widget menjadi hal yang penting sekali dalam Pemrograman Flutter 😁
