Media Belajar Bahasa Pemrograman | by APPKEY

DartTutorial Dart 28 : Adaptive Responsive, Mengenali Perbedaannya!

Tutorial Dart 28 : Adaptive Responsive, Mengenali Perbedaannya!

-

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.

Artikel Terkait  Tutorial Dart 17 : Mengenal Object dalam dart

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:

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!


Jasa Pembuatan Aplikasi, Website dan Internet Marketing | PT APPKEY
PT APPKEY adalah perusahaan IT yang khusus membuat aplikasi Android, iOS dan mengembangkan sistem website. Kami juga memiliki pengetahuan dan wawasan dalam menjalankan pemasaran online sehingga diharapkan dapat membantu menyelesaikan permasalahan Anda.

Jasa Pembuatan Aplikasi

Jasa Pembuatan Website

Jasa Pembuatan Paket Aplikasi

Jasa Pembuatan Internet Marketing

Tutorial

Subscribe Sekarang

Dapatkan beragam informasi menarik tentang bahasa pemrograman langsung melalui email Anda. Subscribe sekarang dan terus belajar bersama kami!

Blog Post Ranking 10

Tutorial Python 9 : Cara Membuat Looping Python

Pada artikel sebelumnya, Codekey telah menjelaskan tentang Operasi Kondisional Python yang di dalamnya menyinggung tentang percabangan dan perulangan. Belajar...

Tutorial PHP 22 : Cara Membuat Redirect PHP dengan Cepat dan Mudah

Jika Anda melakukan browsing di browser kesayangan Anda, mungkin Anda pernah melihat link yang berisikan “php redirect” atau yang...

Tutorial Python 8 : Langkah Mudah Membuat Operasi Kondisional pada Python

Pada pembahasan sebelumnya, Codekey telah menjelaskan kepada Anda tentang pengoperasian string pada Python mulai dari menggabungkan hingga memanipulasi string...

Tutorial Python 7 : Python String Format dan Cara Mudahnya

Anda ingin belajar Python dan ingin menjadi ahli dalam bahasa pemrograman Python? Mari belajar bersama Codekey! Pada pembahasan kali...

Tutorial PHP 23 : Cara Membuat Messages Alert PHP

Alert box atau alert messages digunakan di situs web untuk menampilkan pesan peringatan kepada pengguna bahwa mereka telah memasukkan...

Tutorial Dart 18 : Ayo Mulai, Pelajari Cara Install Flutter

Pada seri tutorial Dart kali ini, Codekey akan menampilkan hal yang sedikit berbeda, yaitu tentang aplikasi-aplikasi yang mendukung pemrograman...

Tutorial SQL 8 : Constraint SQL, Bagaimana Fungsi dan Penggunaannya?

Pada artikel sebelumnya Anda telah mempelajari tentang wildcard SQL, pada artikel kali ini kami akan menjelaskan tentang constraint SQL. Jika...

Tutorial SQL 20 : Mari Pelajari Cara Menggunakan Fungsi GROUP by SQL

Pada pembahasan seri Tutorial SQL ke- 20 ini, Codekey akan membahas tentang GROUP BY yang merupakan statement di dalam...

Tutorial Javascript 8 : Array Javascript, Panduan Lengkap Cara Membuatnya

Seperti bahasa pemrograman yang berorientasi objek lainnya, dalam JavaScript juga terdapat array. Jika Anda memiliki banyak objek yang ingin...

Tutorial Javascript 21 : Panduan Membuat Number Format Javascript

Ada banyak cara berbeda untuk mencetak integer dengan koma sebagai pemisah ribuan dalam JavaScript. Untuk mencetak integer dalam JavaScript,...

Bisnis

Online Service

Peluang Bisnis

Model Bisnis

Entrepreneurship

Uang

Ketrampilan

Outsourcing

Monetize

Pemasaran

SEO

Internet Marketing

Dasar Pemasaran

Strategi Pemasaran

Situs Web Analitik

Iklan

Teknologi

Teknologi Terbaru

AI

Komputer

Jaringan

Paling Sering dibaca
Mungkin Anda Menyukainya