Saat ini, sebagian besar pengguna flutter SDK memang masih bertujuan untuk aplikasi mobile. Namun, setelah release flutter 2.0 itu, flutter web mulai eksis dan memungkinkan penggunaan tampilan dekstop. Sehingga, sebuah hal yang wajar buat kita, agar kita tahu seperti apa kita membuat tampilan responsive pada flutter. Kali ini saya akan memberikan beberapa tips mudah untuk membuat tampilan responsive selayaknya tampilan web yang bisa dibuka di handphone maupun di dekstop.
1. Logika Responsive
Selain kebergunaan state, flutter juga memiliki MediaQuery yang otomatis di-listen oleh widget, dan bisa di-render ulang ke UI. Cara kerjanya adalah dengan memberikan logic yang kita inginkan ketika ada perubahan MediaQuery.
Contoh: Ketika aplikasi pada lebar layar 320px ke bawah maka widget Container akan hilang namun ketika widget dirender pada layar yang lebarnya diatas 320px maka widget Container akan muncul.
dari logika diatas kita dapat membuat kode seperti dibawah.
Jika anda membuka halaman ini menggunakan laptop, silakan geser-geser viewnya maka akan terlihat bagaimana perbedaannya.
2. Trik Responsivitas Aplikasi Agar Bisa Seperti Bootstrap
Jika anda merupakan web programmer, maka anda tidak akan asing mendengar yang namanya framework bootstrap. Framework ini merupakan tools untuk mempermudah kita dalam mengatur tampilan website.
Dalam bootstrap kita bisa membuat tampilan responsive dengan grid-grid tertentu yang memiliki break point (batas) pada lebar layar yang dinaungi aplikasi.
Cara yang paling mudah untuk membuat grid seperti bootstrap ini adalah mengguankan package simple_grid package ini juga memiliki dokumentasi berbahasa indonesia yang tentunya akan memudahkan anda dalam menggunakan package ini.
