Tuesday, December 24, 2019

Membuat Tampilan (Layout) Responsive Pada Flutter

Tampilan Responsive pada Flutter
Cara Membuat Tampilan (Layout) Responsive Pada Flutter - Dalam membuat aplikasi baik aplikasi web maupun mobile, tentu saja kita harus memikirkan variasi ukuran layar (space) dari target device dimana aplikasi yang kita buat akan diakses atau diinstall. Untuk itu dalam mambuat tampilan aplikasi kita perlu membuat tampilan dengan kemampuan responsive atau menyesuaikan dengan keadaan.

Ada berbagai macam cara untuk membuat tampilan aplikasi responsive pada Flutter, tapi sebelum kita membahas lebih jauh perlu anda pahami terlebih dahulu konsep utama dari tampilan responsive yang akan kita buat adalah menyesuaikan ukuran viewport/layar/space yang ada. Misalnya pada sebuah contoh kasus,, dimana jika device dengan lebar layar sama dengan atau lebih besar dari 600 logical pixel, kita akan membuat 3 kolom, dan jika kurang dari ukuran (600 logical pixel) itu maka kita akan membuat layout dengan 2 kolom.

Untuk itu, agar lebih memahami bagaimana cara membuat tampilan responsive pada Flutter, langsung saja kita membuat sebuah contoh kode tampilan responsive pada Flutter seperti dibawah ini:

Kode:

Keterangan Kode:
Pada contoh pembuatan tampilan responsive kali ini, saya menggunakan widget bernama LayoutBuilder, widget ini memiliki 2 object variabel utama pada parameter builder yaitu (BuildContext context, BoxConstraints constraints) dimana kita bisa menggunakan object constraints untuk mengambil ukuran lebar maksimal dimana widget LayoutBuilder ditempatkan.

Pada contoh kasus diatas, widget LayoutBuilder ditempatkan langsung pada body Scaffold paling luar, dehingga bisa dikatakan ukuran lebar yang kita dapatkan hampir seukuran logical pixel dari layar device.

Lalu, pada kode tersebut kita menggunakan widget Gridview sebagai widget layout utama aplikasi kita, dimana pada Gridview kita memainkan parameter crossAxisCount untuk mengatur jumlah kolom yang muncul pada ukuran layar tertentu.

Hasil Aplikasi

Berikut adalah contoh hasil eksekusi kode pada layar HP dengan lebar kurang dari 600 logical pixel (kiri) dan pda layar tablet dengan lebar lebih dari 600 logical pixel (kanan).

Hasil Aplikasi
Tips:
Sekedar mengingatkan saja, dengan metode LayoutBuilder maxWidth dan maxHeight tidak akan berpengaruh dengan rotasi layar atau oerientasi layar. Sehingga jika apliaksi yang anda buat menginginkan untuk responsive pda level orientasi, anda bisa mengunakan kode MediaQuery.of(context).orientation untuk mendeteksi posisi orientasi layar baik portrait maupun landspace serta mengkombinasikan dengan cara di atas.

Source code lengkap dari projek di atas bisa diambil melalui link dibawah ini
Share This
Previous Post
Next Post

Halo, Saya A.M Hirin seorang Penulis Buku IT, International Freelance Programmer, dan Senior Developer di Perusahaan Konsultan IT. Saya penggila kode dan sudah berkutat selama 15 tahun di dunia pemrograman. Anda membutuhkan bantuan terkait skill dan keahlian saya? Kontak saya melalui email : nump.info@gmail.com

0 komentar: