Adanya foldable phone yang bisa berubah dari mode tampilan phone ke tablet secara seamless tanpa perlu memiliki 2 device menjadi game changer dalam Development Aplikasi khususnya Aplikasi Android. hal ini menyebabkan aplikasi Android harus memiliki kemampuan seperti website, yaitu tampilannya harus bisa menyesuaikan jenis layar device yang digunakan oleh User agar informasi yang terdapat di Aplikasi bisa secara tersampaikan ke user secara optimal tanpa ada bagian yang terpotong. tapi sebagian besar Aplikasi Android saat ini masih belum menerapkan Adaptive Layout karena masih berfokus ke tampilan Phone yang menjadi mayoritas pengguna Google Play. karena itu pada pembaruan Android SDK 36 Google Play akan mewajibkan update aplikasi terbaru untuk menerapkan Adaptive Layout.
1. Memahami Adaptive Layout
Adaptive layout adalah pendekatan desain yang memungkinkan aplikasi menyesuaikan tata letak dan elemen UI berdasarkan ruang yang tersedia, platform, dan karakteristik perangkat yang digunakan. Berbeda dengan responsive design yang hanya menyesuaikan ukuran elemen secara proporsional, adaptive layout dapat mengubah struktur tata letak sepenuhnya untuk memberikan pengalaman pengguna yang optimal.
Flutter menyediakan berbagai widget dan tools untuk membuat adaptive layout, seperti MediaQuery, LayoutBuilder, OrientationBuilder, dan platform-specific widgets. Dengan kombinasi tools ini, developer dapat membangun aplikasi yang tidak hanya responsif terhadap ukuran layar, tetapi juga adaptif terhadap platform dan konteks penggunaan.
2. Implementasi Adaptive Layout di Flutter
2.a Platform Detection
Flutter menyediakan beberapa cara untuk mendeteksi platform yang sedang digunakan:
import 'dart:io';
import 'package:flutter/material.dart';
Widget build(BuildContext context) {
if (Platform.isAndroid) {
return ElevatedButton(
child: const Text('Android Button'),
onPressed: () {},
);
} else if (Platform.isIOS) {
return CupertinoButton(
child: const Text('iOS Button'),
onPressed: () {},
);
}
return Container();
}Metode ini memungkinkan developer untuk memberikan pengalaman native yang sesuai dengan platform masing-masing.
2.b Responsive Layout dengan MediaQuery
MediaQuery adalah widget fundamental untuk mendapatkan informasi tentang ukuran layar dan membuat keputusan layout:
Widget build(BuildContext context) {
final screenWidth = MediaQuery.of(context).size.width;
if (screenWidth > 600) {
return DesktopLayout();
} else {
return MobileLayout();
}
}Widget ini sangat berguna untuk membuat breakpoint yang menentukan kapan aplikasi harus beralih dari layout mobile ke tablet atau desktop.
2.c LayoutBuilder untuk Adaptive Constraints
LayoutBuilder memberikan informasi tentang constraints dari parent widget, memungkinkan pembuatan layout yang lebih dinamis:
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (context, constraints) {
if (constraints.maxWidth > 600) {
return Row(
children: [
Expanded(child: NavigationRail()),
Expanded(flex: 3, child: ContentArea()),
],
);
} else {
return Column(
children: [
Expanded(child: ContentArea()),
BottomNavigationBar(),
],
);
}
},
);
}Pendekatan ini memastikan layout menyesuaikan dengan ruang yang benar-benar tersedia, bukan hanya ukuran layar perangkat.
3. Best Practices Adaptive Layout
3.a Hindari Hardcoded Sizes
Menggunakan ukuran tetap akan menyebabkan masalah pada berbagai ukuran layar. Gunakan Flexible, Expanded, atau ukuran relatif seperti persentase dari lebar/tinggi layar :
Container(
// buat width nya jadi 80% ukuran layar
width: MediaQuery.of(context).size.width * 0.8,
child: Text('Responsive width'),
)3.b Gunakan Window Size Classes
Window size classes adalah pendekatan yang direkomendasikan Google untuk mengelola layout di berbagai ukuran layar tanpa perlu kustomisasi spesifik perangkat. Flutter dapat mengimplementasikan konsep ini dengan mendefinisikan breakpoint yang konsisten.
Tambahkan dependency ke file pubspec.yaml
dependencies:
window_size_classes: ^1.1.0+1Implementasi kode :
import 'package:flutter/material.dart';
import 'package:window_size_classes/window_size_classes.dart';
class AdaptiveLayout extends StatelessWidget {
@override
Widget build(BuildContext context) {
final windowClass = WindowSizeClass.fromContext(context);
return Scaffold(
body: LayoutBuilder(
builder: (context, constraints) {
switch (windowClass.widthClass) {
case WidthClass.compact:
return CompactLayout();
case WidthClass.medium:
return MediumLayout();
case WidthClass.expanded:
return ExpandedLayout();
}
},
),
);
}
}3.c Gunakan Sizer
Jika merasa kode untuk Adaptive Layout terlalu panjang, kamu bisa menggunakan package bernama “Sizer”.
Tambahkan dependency ke file pubspec.yaml
dependencies:
sizer: ^3.1.3Wrap widget atau root App yang ingin menggunakan sizer dengan Widget Sizer
Sizer(
builder: (context, orientation, screenType) {
return MaterialApp(
home: HomePage(),
);
},
);Penerapan Dynamic Size :
Container(
width: Adaptive.w(20), // Memakai ukuran 20% width screen
height: 30.5.h // Memakai 30.5% tinggi screen
)Adaptive Text Size
Text(
'Sizer',
style: TextStyle(fontSize: 15.sp),
// selain .sp, bisa menggunakan .dp untuk adaptive size nya
)Orientation
Device.orientation == Orientation.portrait
? Container( // Untuk orientasi portrait
width: 100.w,
height: 20.5.h,
)
: Container( // Untuk orientasi landscape
width: 100.w,
height: 12.5.h,
)Screen Type Breakpoint
Device.screenType == ScreenType.tablet
? Container( // Breakpoint untuk Tablet
width: 100.w,
height: 20.5.h,
)
: Container( // Breakpoint untuk Mobile
width: 100.w,
height: 12.5.h,
)3.e Jangan Kunci Orientasi
Sesuai dengan persyaratan Android 16, aplikasi tidak boleh mengunci orientasi pada perangkat layar besar. Pastikan layout dapat beradaptasi dengan baik saat terjadi rotasi layar:
// Jangan gunakan ini untuk layar besar
SystemChrome.setPreferredOrientations([
DeviceOrientation.portraitUp,
]);
// Gunakan adaptive layout sebagai gantinya
return OrientationBuilder(
builder: (context, orientation) {
return orientation == Orientation.portrait
? PortraitLayout()
: LandscapeLayout();
},
);3.f Handle Configuration Changes
Rotasi layar dan perubahan ukuran window akan menyebabkan activity recreation. Pastikan state aplikasi disimpan dengan benar menggunakan StatefulWidget, Provider, atau state management solution lainnya untuk menghindari kehilangan data pengguna.
3.g Gunakan SafeArea
Widget SafeArea memastikan konten tidak tertutup oleh notch, status bar, atau navigation bar :
return Scaffold(
body: SafeArea(
child: YourContent(),
),
);3.h Test di Berbagai Perangkat
Gunakan emulator dengan berbagai ukuran layar, orientasi, dan form factor untuk memastikan adaptive layout berfungsi dengan baik. Flutter DevTools menyediakan tools untuk testing responsiveness aplikasi di berbagai konfigurasi. Selain menggunakan Emulator kamu bisa menggunakan Remote Device gratis dari firebase dengan limit penggunaan 15 menit yang lebih ringan dari Emulator
4. Persiapan Menghadapi Android 16
Dengan target API 36 yang akan menjadi mandatory di Google Play pada Agustus 2026, developer Flutter perlu segera mengadaptasi aplikasi mereka. Berikut langkah-langkah yang perlu dilakukan:
Update Target SDK: Pastikan aplikasi menargetkan API 36 atau lebih tinggi di file build.gradle.
Testing dengan App Compat Framework: Gunakan flag UNIVERSAL_RESIZABLE_BY_DEFAULT untuk menguji bagaimana aplikasi berperilaku dengan aturan baru.
Implementasi Adaptive Layout: Terapkan semua best practices adaptive layout menggunakan tools yang tersedia di Flutter.
Handle Edge-to-Edge: Android 16 juga menghilangkan opt-out untuk edge-to-edge layout, jadi pastikan konten aplikasi dapat menangani inset sistem dengan benar.
Dengan menerapkan adaptive layout sejak sekarang, aplikasi Flutter tidak hanya akan memenuhi persyaratan Android 16, tetapi juga memberikan pengalaman pengguna yang superior di semua platform dan perangkat. Flutter memberikan keunggulan signifikan dalam hal ini karena satu codebase dapat menghasilkan adaptive layout yang bekerja sempurna di Android, iOS, Web, dan Desktop.
