Mengenal Responsive dan Adaptive Apps di Flutter

Sebelum kamu memulai untuk belajar tentang Flutter, ada baiknya kamu harus mengenal terlebih dahulu Responsive dan Adaptive Apps di Flutter

Apa itu Responsive dan Adaptive Apps?

  1. Responsive

Responsive adalah kemampuan aplikasi Flutter dalam merespon adanya perubahan ukuran UI pada tampilan layar. Perubahan ukuran UI mengikuti pada device yang digunakan saat merespon ukuran UI pada tampilan layar, contohnya seperti PortraitLandscape, dan ukuran layar yang lebih besar. Kebanyakan developer menggunakan widget ini pada MediaQueryLayoutBuilderFlexible WidgetExpanded, dan lainnya.

Contoh Responsive pada penggunaan widget MediaQuery:

Widget build(BuildContext context) {
final screenWidth = MediaQuery.of(context).size.width;

if (screenWidth > 600) {
// Berfungsi untuk menampilkan tata letak yang berbeda untuk layar yang lebih besar
return DesktopLayout();
} else {
return MobileLayout();
}
}

Penggunaan MediaQuery ini digunakan untuk membuat desain yang berdasarkan dengan ukuran. sehingga dengan adanya MediaQuery dapat membuat bagian pada UI dapat diatur sesuai dengan ruang yang tersedia.

Contoh Responsive pada penggunaan widget Layout Builder:

Widget build(BuildContext context) {
return LayoutBuilder(
builder: (context, constraints) {
if (constraints.maxWidth > 600) {
return WideLayout();
} else {
return NarrowLayout();
}
},
);
}

Penggunaan LayoutBuilder dapat membuat tata letak menjadi lebih baik dan responsif dan disesuaikan dengan ukuran layar yang digunakan.

2. Adaptive

Adaptive adalah kemampuan aplikasi Flutter dalam menyesuaikan tata letak dan desain yang disesuaikan dengan platform atau perangkat yang digunakan oleh pengguna aplikasi. Pengguna IOS akan mendapatkan tampilan aplikasi yang sesuai dengan perangkat IOS, sedangkan pengguna Android akan mendapatkan tampilan aplikasi yang sesuai dengan perangkat AndroidFlutter juga menyediakan widget platform yang dapat digunakan oleh developer dalam mengembangkan aplikasi. Cupertino untuk IOS dan Material untuk Android.

Contoh Adaptive pada penggunaan widget platform:

import ‘dart:io’;
import ‘package:flutter/cupertino.dart’;
import ‘package:flutter/material.dart’;

Widget build(BuildContext context) {
return Platform.isIOS
? CupertinoButton(child: const Text(‘iOS Button’), onPressed: () {})
: ElevatedButton(child: const Text(‘Android Button’), onPressed: () {});
}

Kesimpulan

Dengan kita menggunakan responsive dan adaptive pada aplikasi Flutter, kita dapat membuat aplikasi Flutter menjadi lebih baik dan dapat digunakan di semua perangkat, tanpa perlu memikirkan ukuran layar yang berbeda dan tampilan UI menjadi tidak sesuai. Aplikasi yang kita buat juga dapat berjalan dengan baik di semua platform tanpa terkecuali. sehingga dengan adanya kombinasi antara responsive dan adaptive akan sangat membantu kita dalam mengembangkan aplikasi Flutter yang optimal.

Mengenal Responsive dan Adaptive Apps di Flutter | BuildWithAngga

Subscribe

Related articles

Flutter VS React Native, Mana Yang Lebih Baik untuk Proyek Anda?

Saat membuat aplikasi seluler menjadi lebih populer, bisnis mencari...

Menyederhanakan Flutter ORM

Memahami ORM dan Pentingnya Apa itu ORM? Pemetaan Relasional Objek (ORM)...

Database lokal terbaik untuk Flutter

Data aplikasi web apa pun adalah komponen terpentingnya. Aplikasi...

Flutter Json Serialization

Apa itu JSON ? JSON (JavaScript Object Notation) adalah format...

Flutter REST API

Apa itu Rest API ?REST API adalah antarmuka (interface)...

LEAVE A REPLY

Please enter your comment!
Please enter your name here