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?
- 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 Portrait, Landscape, dan ukuran layar yang lebih besar. Kebanyakan developer menggunakan widget ini pada MediaQuery, LayoutBuilder, Flexible Widget, Expanded, 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 Android. Flutter 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