Responsive & Adaptive App

Flutter User Interface (UI)

Pemrograman Mobile 2

 

 

Muhamad Saad Nurul Ishlah, M.Comp.

Dept. Sistem Informasi & Dept. Ilmu Komputer, Universitas Pakuan

Agenda Kuliah

  • Responsive vs Adaptive
  • Faktor Responsive
  • Faktor-faktor adaptive
  • Implementasi aplikasi Adaptive 
  • Tips 

Aplikasi Responsif & Adaptif

Flutter Cross Platform

  • Flutter mendukung implementasi aplikasi untuk banyak target gawai
  • Tidak berarti aplikasi akan otomatis menyesuaikan
  • Perlu implementasi tambahan agar dapat merespon perubahan gawai
    • Responsif
    • Adaptif

Desain Responsif

  • Bagaimana tata letak antarmuka pengguna dapat beradaptasi berdasarkan ukuran layar gawai
  • Muncul seiring berkembangnya teknologi web
  • Saat ini perangkat seluler memperkenalkan banyak kasus penggunaan baru, tidak hanya ukuran layar saja
  • Perlu desain yang Adaptif

Desain Adaptif

  • Bagaimana aplikasi dapat beradaptasi tidak hanya berdasarkan ukuran layar perangkat 
  • Beberapa faktor:
    • Sistem operasi yang berbeda dengan pengalaman pengguna yang berbeda
    • Cara pengguna berinteraksi: gerakan sentuh, trackpad, mouse, suara, ...
    • Aksesibilitas
    • Kinerja koneksi

Responsif vs Adaptif

Responsif

  • Mengatur tata letak sesuai ukuran layar yang tersedia.
  • Berarti (misalnya), menata ulang UI jika pengguna mengubah ukuran jendela, atau mengubah orientasi perangkat.
  • Diperlukan ketika aplikasi yang sama dapat berjalan di berbagai perangkat, dari jam tangan, ponsel, tablet, hingga laptop atau komputer desktop.

Adaptif

  • Membuat aplikasi beradaptasi pada jenis perangkat yang berbeda, seperti seluler dan desktop, input mouse dan keyboard, serta input sentuh.
  • Ada ekspektasi yang berbeda tentang kepadatan visual aplikasi, cara kerja pemilihan komponen, menggunakan fitur khusus platform, dan beberapa faktor lainnya.

Faktor Adaptivitas

  • Display
    • Ukuran layar, Kepadatan pixel, Padding, dll 
  • Platform
    • Android, iOS, Web, macOS, Windows
  • Input Pengguna
    • Sentuhan, Keyboard & Mouse, Voice, Screen Reader
  • Aksesibilitas
    • Skala teks, kontras
  • Performa
    • Koneksi jaringan, Animasi

Membuat Aplikasi Adaptif

Membuat Aplikasi Adaptif

Pendekatan:

  • Menggunakan kelas LayoutBuilder
    • Membangun pohon widget yang dapat bergantung pada ukuran widget induk.
  • Menggunakan metode MediaQuery.of() dalam fungsi build
    • Gunakan fungsi ini untuk mengecek ukuran dan orientasi layar, serta parameter media lainnya (lihat MediaQueryData untuk contoh lainnya).
    • Ketika informasi itu berubah, widget akan dijadwalkan untuk dibangun kembali, menjaga widget tetap mutakhir.

Membuat Aplikasi Responsif

Widget yang dapat digunakan:

Mendeteksi dan Mengatur Tampilan

  • Ukuran Layar
  • Kepadatan Layar
  • Padding Tampilan
  • Mode Gelap

Mendeteksi Ukuran Layar

@override
Widget build(BuildContext context) {
    final mediaQuery = MediaQuery.of(context);

    if (mediaQuery.size.width > 1024) {
      return LargeLayout();
    }

    if (mediaQuery.size.width > 332) {
      return MediumLayout();
    }

    return SmallLayout();
}
  • Gunakan property size dari MediaQuery
  • Berdasarkan ukuran layar, tampilkan widget yg berbeda

Mendeteksi Kepadatan Layar

  • Berapa banyak pixel yang dapat ditampilkan dalam sebuah layar
  • Setiap gawai memiliki kepadatan pixel yang berbeda
  • Gunakan property devicePixelRatio dari MediaQuery
  • Contoh
    • Menghemat bandwith

Mendeteksi Kepadatan Layar

@override
Widget build(BuildContext context) {
    final mediaQuery = MediaQuery.of(context);

    if (mediaQuery.devicePixelRatio >= 2) {
      return HighDefinitionVideo();
    }

    return LowDefinitionVideo();
}
  • Berapa banyak pixel yang dapat ditampilkan dalam sebuah layar
  • Setiap gawai memiliki kepadatan pixel yang berbeda
  • Gunakan property devicePixelRatio dari MediaQuery
  • Contoh
    • Menghemat bandwith

Mendeteksi Padding Tampilan

  • Banyak gawai yang memiliki "notch"
  • Informasi dapat tertutup
  • Gunakan property padding dari MediaQuery
  • Contoh
    • Menghemat bandwith

Mendeteksi Padding Tampilan

@override
Widget build(BuildContext context) {
    final mediaQuery = MediaQuery.of(context);
    return Padding(
      padding: EdgeInsets.only(
        top: mediaQuery.padding.top,
      ),
      child: Child(),
    );
}
  • Banyak gawai yang memiliki "notch"
  • Informasi dapat tertutup
  • Gunakan property padding dari MediaQuery

Mendeteksi Padding Tampilan

@override
Widget build(BuildContext context) {
    return SafeArea(
      left: false,
      right: false,
      bottom: false,
      child: Child(),
    );
}
  • Banyak gawai yang memiliki "notch"
  • Informasi dapat tertutup
  • Gunakan property padding dari MediaQuery
  • atau dapat memanfaatkan widget SafeArea

Mendeteksi Padding Tampilan

@override
Widget build(BuildContext context) {
    final mediaQuery = MediaQuery.of(context);
    return Padding(
      padding: EdgeInsets.only(
        bottom: mediaQuery.viewInsets.bottom,
      ),
      child: Child(),
    );
}
  • Gunakan property viewInsets dari MediaQuery
  • atau dapat memanfaatkan widget Scaffold

Mendeteksi Mode Tampilan

 @override
  Widget build(BuildContext context) {
    final mediaQuery = MediaQuery.of(context);
    return Image.asset(
      mediaQuery.platformBrightness == Brightness.dark
          ? 'assets/background_dark.png'
          : 'assets/background_light.png',
    );
  }
  • Gunakan property platformBrightness dari MediaQuery
  • Jika menggunakan MaterialApp, dapat memanfaatkan penggunaan theme (lightTheme atau darkTheme)

Mendeteksi Platform

  • Mengetahui sistem operasi yang digunakan dapat meningkatkan pengalam pengguna – betah 

Mendeteksi Platform

import 'dart:io';
import 'package:flutter/foundation.dart';

@override
Widget build(BuildContext context) {
    if(kIsWeb || Platform.isMacOS || Platform.isLinux || Platform.isWindows) {
        return DesktopLayout();
    }
    
    return MobileLayout();
}
  • kelas Platform untuk mendeteksi platform 
  • untuk web, gunakan konstanta kIsWeb

Internationalisasi

  • Penggunakan aplikai tumbuh, penggunaan aplikasi secara global
  • Berbagai bahasa, pengaturan waktu, ltr atau rtl 
  • Pastikan memberikan variasi konten untuk multi-region

Mendeteksi Lokasi

@override
Widget build(BuildContext context) {
  final locale = Localizations.localeOf(context);
  return Image.asset('flag_${locale.countryCode}.png');
}
  • Gunakan Localizations untuk mendapatkan informasi lokasi
  •  

Mendeteksi Lokasi

@override
Widget build(BuildContext context) {
  final locale = Localizations.localeOf(context);
  final formattedDate = DateFormat.yMMMMEEEEd(locale.toString());
  return Text(formattedDate);
}
  • Gunakan Localizations untuk mendapatkan informasi lokasi
  • Memberikan label, gunakan package intl. 
  • Berguna ketika menggunakan DateFormat

Mendeteksi Lokasi

@override
Widget build(BuildContext context) {
  final direction = Directionality.of(context);
  return Image.asset('horizontal_illustration_${direction.value}.png');
}
  • Jika mendukung bahasa rtl, gunakan Directionality untuk mendeteksi
  • Beberapa widget akan mengadaptasikan posisinya sesuai dengan informasi rtl

Mendeteksi Input Pengguna

@override
Widget build(BuildContext context) {
  final direction = Directionality.of(context);
  return Image.asset('horizontal_illustration_${direction.value}.png');
}
  • Jika mendukung bahasa rtl, gunakan Directionality untuk mendeteksi
  • Beberapa widget akan mengadaptasikan posisinya sesuai dengan informasi rtl

Diskusi

Ada pertanyaan?

Referensi

Terima Kasih

Made with Slides.com