Memahami Layout di Flutter

Flutter merupakan SDK aplikasi mobile yang dikembangkan google untuk membangun aplikasi yang memiliki kinerja tinggi yang dapat dipublikasi ke platform Android dan IOS dari code basis tunggal. Pertama dirilis pada Mei 2017 dan saat Event Google I/O Juni 2017 flutter mendapatkan update versi preview 1. Flutter dapat mudah dipelajari karena menggunakan bahasa pemrograman Dart apalagi jika sudah familiar dengan pemograman Java dan Java Script.

Dokumentasi flutter sangat lengkap di internet, anda bisa baca disini https://flutter.dev/docs, dan yang menjadi point menarik kenapa saya menulis judul memahami Layout di Flutter, karena saat membuat tata letak untuk aplikasi flutter sebaiknya memahami juga kerangka kerja menangani pembuatan tata letak.

Kerangka flutter membangun tata letaknya melalui komposisi widget, semua yang anda buat secara pemrograman adalah widget dan ini di compile bersama user interface UI. Sebagai contoh mari kita lihat komponen TabLayout yang merupakan komponent tampilan umum yang digunakan dalam aplikasi android :

Jadi jika kita membuat tata letak ini secara manual didalam aplikasi flutter maka struktur file tata letak akan dibuat seperti ini :

kalau dilihat awalnya terlihat membingungkan, saya akan detailkan penjelasan diatas.

Container adalah widget itu sendiri termasuk child widget juga mempunyai kemampuan membuat style properties seperti padding, background warna dan lain sebagainya

Pada TabLayout Component seluruh tata letak ditempatkan di sebuah container sehingga layout dienkapsulasi ke dalam container sendiri secara terpisah. Tetapi dalam kasus ini container yang digunakan hanya untuk gambar (indikator yang dipilih yang berada pada TabLayout), kita dapat gunakan container ini mengatur menambahkan margin pada bagian atas gambar pada indikator yang dipilih.

Di Flutter cara umum yang biasa dilakukan meletakan widget dengan menyusun menjadi kolom dan baris ini memungkinkan kita untuk mengatur dengan komponen secara Vertikal / Horizontal. Saat anda ingin gunakan tata letak komponen secara horizontal, maka anda dapat menggunakan baris dan untuk tata letak vertikal anda gunakan kolom. Ada juga stack widget untuk konten yang tumpah tindih, tapi kita tidak akan membahasnya diposting ini.

Jadi didalam tab layout, kita hanya memerlukan satu baris di sebuah container utama, karena semua child component akan masuk dalam satu barus ini , kita akan masukan 1 baris untuk child components, kita lihat 4 kolom bisa dibuat diatas satu baris tersebut, karena 4 kolom tersebut telah menjadi 4 tab pada setiap kolomnya

kemudian dalam masing masing kolom bisa ditempatkan lagi sebagai child widget dan didalamnya bisa mengatur jenis teks dan memuat gambar untuk indikator yang dipilih dan juga berlaku untuk setiap Container lainnya disetiap kolom tersebut. Tidak diwajibkan kita memiliki container disini itu hanya contoh saja. Text dan Container component didalamnya terdapat kolom yang ditentukan jika ingin menampilkan widget secara vertikal

Seperti terlihat susunan kerangka diatas dengan mudahnya kita bisa menyusun layout widget sehingga User Interface lebih mudah dibuat.

Tidak pernah terbayang memang untuk membuat layout seperti ini terhadap aplikasi yang kita buat, namun saatnya kita memikirkan untuk menyusun layout tersebut dalam menggunakan framework flutter

Sampai bertemu dibahasan selanjutnya, Semoga sharing ini bermanfaat, Sukses untuk semuanya Aamiin