Gunakan tanda [] untuk mencari tag gan! contoh [flutter, javascript]

Cara Membuat Tampilan Responsive pada Flutter

Cara Membuat Tampilan Responsive pada Flutter

access_time 16 Nov 2021 remove_red_eye 570 Kali spellcheck 229 Kata, 1746 Karakter
#flutter #dart #responsive

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.


Navigasi Konten