MainAxisAlignment adalah salah satu properti di Flutter yang digunakan untuk mengatur posisi atau penyebaran children di sepanjang main axis. Ini sangat berguna ketika Anda ingin menyelaraskan item-item dalam Row atau Column dengan pola tertentu. Ada beberapa pilihan nilai yang bisa digunakan dalam MainAxisAlignment:
a. MainAxisAlignment.start
Posisi children dimulai dari awal sumbu utama. Untuk Row, item akan disejajarkan di sebelah kiri, sementara untuk Column, item akan mulai dari bagian atas.
b. MainAxisAlignment.end
Posisi children akan ditempatkan di ujung sumbu utama. Dalam Row, item akan berada di sebelah kanan, dan untuk Column, item akan berada di bagian bawah.
c. MainAxisAlignment.center
Posisi children akan ditempatkan di tengah sepanjang sumbu utama, memberikan efek penyeimbangan.
d. MainAxisAlignment.spaceBetween
Memberikan jarak yang sama di antara children, tanpa jarak di awal dan akhir. Children pertama akan ditempatkan di awal, dan children terakhir di akhir, dengan jarak yang merata di antara mereka.
e. MainAxisAlignment.spaceAround
Mirip dengan spaceBetween, tetapi ada jarak yang merata di antara children serta di awal dan akhir baris atau kolom.
f. MainAxisAlignment.spaceEvenly
Mendistribusikan jarak yang merata antara semua children, termasuk di awal dan akhir baris atau kolom, sehingga setiap space menjadi sama.
Kapan Menggunakan MainAxisAlignment?
Mengetahui kapan harus menggunakan MainAxisAlignment sangat penting untuk memastikan UI aplikasi Anda terlihat rapi dan terstruktur. Berikut beberapa skenario umum di mana MainAxisAlignment sering digunakan:
Menyejajarkan tombol di bagian bawah layar: Misalnya, Anda ingin tombol-tombol penting selalu berada di bagian bawah aplikasi. Anda bisa menggunakan MainAxisAlignment.end pada Column.
Mendistribusikan widget dengan jarak yang sama: Untuk membuat tampilan yang seimbang dan estetik, Anda bisa menggunakan spaceAround atau spaceBetween pada Row atau Column.
Menyusun elemen di tengah: Saat Anda ingin menyejajarkan widget di tengah layar, MainAxisAlignment.center sangat membantu untuk membuat tampilan menjadi lebih simetris.
Sumber
https://arzerin.com/
Posting Komentar