Tutorial Flutter — Layout
Tutorial Flutter. Membuat Layout
Halo semua, pada kali ini, kita akan membahas widget layout. Dasarnya, untuk layout ada dikelan dengan container, row, dan column.
Sebelum itu, mari mengenal bagian awal-nya.
Material App
Material App adalah library yang berisi widget — widget untuk membuat aplikasi. Ada banyak properti untuk membuat tampilan mobile.
Home
Home adalah properti awal yang digunakan untuk menempatkan widget widget.
Scaffold
Scaffold adalah container yang digunakan untuk menampilkan widget — widget yang ada di dalam scaffold. Untuk saat ini yang digunakan hanya appBar dan body. Scaffold merupakan container bawaan dari library material.
appBar
Appbar adalah “kepala judul” sebuah aplikasi. Untuk memuat Text pada appBar, dibutuhkan title.
Body
Body adalah bagian badan aplikasi dimana kita menempatkan berbagai widget didalamnya.
Column dan Row
Sekarang kita akan membahas row dan column.
Row
Row digunakan untuk mengatur posisi widget yang berada dalam column secara vertikal atau kekiri.
Column
Column digunakan untuk mengatur posisi widget yang berada dalam column secara horizontal atau kebawah.
Contoh code seperti berikut:
Jika kita jalankan, maka tampilannya seperti berikut:
Lalu ganti kata column dengan row.
setelah itu arahkan ke terminal dan tekan “r” untuk melakukan “hot reload”. Di flutter, hot reload adalah cara untuk me-run aplikasi yang kita buat secara “live”. Artinya, perubahan yang kita buat akan langsung dijalankan di mobile.
Container
Container adalah widget layout yang dapat mengatur posisi, warna, dan ukuran layar.
Salah satu properti yang bisa digunakan dalam container adalah margin dan padding.
Padding
Padding akan memberikan jarak dari dalam widget menuju widget lainnya.
Contoh code:
Pada contoh diatas, ktia dapat membuat widget sebuah teks ditengah dimana widget Center pertama ditempatkan lalu dimasukkan sebuah container untuk menampilkan teks “Halo Halo Haaalo” dengan container warna merah dan memiliki padding 30 pixel.
Jika kita jalankan, maka hasilnya seperti ini:
Stack
Stack atau tumpukkan sudah pernah kita pelajari dasarnya di OOP. Hal ini juga kita bisa lakukan di Flutter, kita dapat membuat objek bertumpuk menggunakan fungsi Stack.
dan hasil dari codingan stack seperti di bawah ini :
Pada gambar diatas terlihat sekali antara satu objek dengan objek lainnya bertumpuk, sehingga memberikan kesan seperti piring yang bertumpuk.
Selesai sudah materi tentang Layout Flutter. Happy Coding~ ^^
