Tutorial Dart 28 : Adaptive Responsive, Mengenali Perbedaannya!

Last Updated on December 23, 2021 by

Setiap Anda mengembangkan suatu aplikasi, Anda mungkin akan mengembangkannya untuk satu perangkat.  Namun ketahuilah, ada banyak perangkat saat ini. Jadi mau tidak mau Anda harus berurusan dengan berbagai ukuran yang berbeda.

Jika Anda membuat aplikasi hanya untuk satu perangkat misalnya Android saja, percayalah, aplikasi Anda tidak akan sebesar aplikasi yang dibuat untuk Android dan iOS.

Namun seringkali, membuat aplikasi untuk beberapa perangkat sangat melelahkan. Disini kita akan membahas bagaimana cara mengatasi masalah tersebut dengan adaptive responsive Flutter. Salah satu tujuan utama Flutter adalah membuat kerangka kerja yang memungkinkan Anda mengembangkan aplikasi dari satu basis kode yang terlihat dan terasa hebat di platform apa pun.

Hal ini berarti bahwa aplikasi Anda dapat muncul di layar dengan berbagai ukuran, mulai dari smartwatch, hingga ponsel yang dapat dilipat dengan dua layar, hingga monitor definisi tinggi. Dua istilah yang menggambarkan konsep skenario ini adalah adaptif dan responsif. Hal yang Anda butuhkan adalah menciptakan adaptibe dan responsive Layout sehingga dapat dipakai di berbagai layar tersebut.

Perbedaan Aplikasi Adaptive dan Responsive Flutter

Adaptive dan  responsive layout dapat dilihat sebagai dimensi aplikasi yang terpisah: Anda dapat memiliki aplikasi adaptif yang tidak responsif, atau sebaliknya. Dan, tentu saja, sebuah aplikasi bisa menjadi keduanya, atau tidak keduanya.

1. Responsif

Biasanya, aplikasi responsif telah mengatur tata letaknya untuk ukuran layar yang tersedia. Seringkali ini berarti (misalnya), menata ulang UI jika pengguna mengubah ukuran jendela, atau mengubah orientasi perangkat. Ini terutama diperlukan ketika aplikasi yang sama dapat berjalan di berbagai perangkat, mulai dari jam tangan, ponsel, tablet, hingga laptop atau komputer desktop.

2. Adaptif

Mengadaptasi aplikasi untuk berjalan di berbagai jenis perangkat, seperti seluler dan desktop, memerlukan penanganan input mouse dan keyboard, serta input sentuh. Ini juga berarti ada ekspektasi yang berbeda tentang kepadatan visual aplikasi, cara kerja pemilihan komponen (menu berjenjang vs lembar bawah, misalnya), menggunakan fitur khusus platform (seperti jendela tingkat atas), dan banyak lagi.

Membuat aplikasi Flutter yang adaptive responsive

Flutter memungkinkan Anda membuat aplikasi yang menyesuaikan diri dengan ukuran dan orientasi layar perangkat. Ada dua pendekatan dasar untuk membuat aplikasi Flutter dengan desain responsif:

1. Gunakan kelas LayoutBuilder

Dari properti pembangunnya, Anda mendapatkan objek BoxConstraints. Periksa properti kendala untuk memutuskan apa yang akan ditampilkan. Misalnya, jika maxWidth Anda lebih besar dari lebar breakpoint Anda, kembalikan objek Scaffold dengan baris yang memiliki daftar di sebelah kiri. Kembalikan objek Scaffold dengan drawer yang berisi list, jika itu menjadi lebih sempit.

Anda juga dapat menyesuaikan tampilan berdasarkan tinggi perangkat, rasio aspek, atau properti lainnya. Saat batasan berubah (misalnya, pengguna memutar ponsel, atau menempatkan aplikasi Anda ke UI ubin di Nougat), fungsi build berjalan.

2. Gunakan metode MediaQuery.of() dalam fungsi build Anda

Ini memberi Anda ukuran, orientasi, dll, dari aplikasi Anda saat ini. Metode ini akan lebih berguna apabila Anda ingin membuat keputusan berdasarkan konteks keseluruhan, bukan hanya ukuran widget khusus Anda. Sekali lagi,  menggunakan ini akan secara otomatis memicu fungsi build  jika pengguna  mengubah ukuran aplikasi Anda dengan cara apa pun. Widget dan kelas berguna lainnya untuk membuat UI responsif:

• AspectRatio
• CustomSingleChildLayout
• CustomMultiChildLayout
• FittedBox
• FractionallySizedBox
• LayoutBuilder
• MediaQuery
• MediaQueryData
• OrientationBuilder

Itulah penjelasan tentang adaptive responsive Flutter yang bisa Anda coba untuk mengembangkan kemampuan Anda dalam bahasa pemrograman Dart khususnya dengan framework Flutter. Jika Anda ingin belajar lebih jauh tentang Dart, lihatlah seri tutorial Dart di https://codekey.id/ dan dapatkan materi belajar bahasa pemrograman secara gratis!