Apakah app Flutter-mu siap untuk iPhone Duo?

iPhone Duo, iPhone lipat pertama dari Apple, mulai dijual pada 23 Oktober lalu. Kehadirannya memunculkan banyak pertanyaan bagi kita yang mengembangkan aplikasi: apa dampaknya terhadap pengembangan? Apakah kita wajib menyesuaikan aplikasi dengan format lipat baru ini? Kalau iya, kesulitan apa yang akan muncul? Apa yang terjadi kalau kita tidak menyesuaikannya? Bagaimana tampilannya saat perangkat dilipat dan dibuka? Fitur apa saja yang disediakan Flutter untuk menyesuaikan antarmuka?

Di artikel ini saya akan mencoba menjawab semua pertanyaan itu dengan cepat agar kamu memahami apa yang akan datang jika kamu mendistribusikan aplikasi untuk iOS. Di bagian akhir, saya juga akan menunjukkan cara yang sangat sederhana untuk menyesuaikan antarmuka aplikasimu dengan sedikit usaha agar terlihat bagus di iPhone Duo baru.

iPhone Duo mengubah cara aplikasimu ditampilkan

Untuk memahami dengan jelas apa yang terjadi saat menjalankan aplikasi di iPhone Duo, saya menyiapkan aplikasi contoh yang sangat sederhana. Aplikasi ini hanya menampilkan daftar catatan, lalu ketika salah satunya diketuk, kita berpindah ke layar yang menampilkan isi catatan tersebut:

Sekarang mari kita lihat apa yang terjadi saat aplikasi yang sama dijalankan di iPhone Duo. Pertama, saya akan menunjukkan tampilannya ketika dibuat dengan iOS 27.1 SDK, tetapi tanpa penyesuaian lain pada antarmuka:

Seperti yang kamu lihat, ukuran aplikasi berubah untuk mengisi seluruh ruang yang tersedia. Saat perangkat dilipat, hal ini tidak menjadi masalah besar karena dimensi dan rasio aspek layar luar relatif mirip dengan iPhone biasa. Namun, begitu pengguna membukanya, antarmuka yang dirancang untuk jendela smartphone yang sempit menyebar ke seluruh lebar layar dalam. Aplikasinya tetap berfungsi, tetapi tidak memberikan pengalaman terbaik.

Menyesuaikan Flutter untuk iPhone Duo

Untungnya, Flutter menyediakan banyak widget dan fitur untuk menyesuaikan antarmuka, bukan hanya untuk iPhone Duo, tetapi untuk ukuran jendela apa pun. Menurut saya, pola pikir yang tepat bukan “saya akan menyesuaikan aplikasi Flutter untuk iPhone Duo”, melainkan “saya akan menyesuaikan aplikasi Flutter untuk ukuran baru”. Idenya adalah tidak bergantung pada perangkat fisik dan membangun antarmuka responsif yang bereaksi secara dinamis terhadap ruang yang tersedia.

Sebagai contoh, dengan sangat sedikit perubahan kita bisa membuat penyesuaian seperti ini:

Seperti yang kamu lihat, saat Duo dilipat saya mempertahankan tata letak sebelumnya. Saat dibuka, saya memanfaatkan lebar tambahan pada layar dalam untuk menampilkan daftar catatan di sebelah kiri dan detail catatan yang dipilih di sebelah kanan.

Efek ini bisa dibuat dengan mudah menggunakan LayoutBuilder, widget yang memberi kita batasan ukuran yang diterimanya dari widget induk. Ketika batasan tersebut berubah, misalnya saat orientasi perangkat berubah atau saat iPhone Duo dilipat atau dibuka, Flutter menjalankan kembali builder-nya. Dengan begitu, kita dapat memilih antarmuka yang sesuai berdasarkan ruang yang tersedia:

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: const Text('Notes')),
    body: SafeArea(
      top: false,
      child: LayoutBuilder(
        builder: (context, constraints) {
          if (constraints.maxWidth >= _wideLayoutWidth) {
            return _WideNotesLayout(
              notes: _notes,
              selectedIndex: _selectedNoteIndex,
              onSelected: _selectNote,
            );
          }

          return _NotesList(notes: _notes, onSelected: _openNote);
        },
      ),
    ),
  );
}

Selain LayoutBuilder, dalam contoh ini saya menggunakan SafeArea untuk menjaga konten tetap berada di luar area yang ditempati antarmuka sistem, kamera, dan sudut membulat. Flutter menawarkan banyak fitur lain untuk membuat antarmuka adaptif: MediaQuery.sizeOf() memungkinkan kita memeriksa ukuran jendela aplikasi saat ini; Expanded dan Flexible membagi ruang di dalam baris dan kolom; sedangkan ConstrainedBox memungkinkan kita menetapkan batas minimum atau maksimum agar konten tidak melebar terlalu jauh. Ini hanya beberapa contoh. Flutter menyediakan lebih banyak lagi fitur untuk menyesuaikan antarmuka dengan ruang yang tersedia.

Apakah saya wajib menyesuaikan aplikasi untuk iPhone Duo? Apakah sepadan?

Sebelum membahas apakah menyesuaikan aplikasimu untuk iPhone Duo sepadan atau seberapa canggih penyesuaian yang perlu dibuat, mari kita lihat terlebih dahulu persyaratan yang diumumkan Apple dan perlu kamu ketahui:

Persyaratan ini tidak secara eksplisit mewajibkanmu membuat antarmuka khusus untuk iPhone Duo. Namun, kewajiban menyediakan tangkapan layar khusus perangkat tampaknya menunjukkan bahwa Apple mengharapkan kita memeriksa bagaimana aplikasi berjalan di perangkat tersebut dan setidaknya memperbaiki masalah penyesuaian yang paling jelas.

Jadi, seberapa besar usaha yang layak diberikan untuk penyesuaian ini? Jawabannya sangat bergantung pada jenis aplikasi dan harapan penggunanya. Dalam kasus saya, aplikasi saya terutama digunakan di smartphone dan tablet hanya mewakili sebagian sangat kecil dari pengguna saya. Masuk akal jika saya juga tidak akan memiliki banyak pengguna dengan iPhone Duo. Karena itu, saya mungkin hanya akan melakukan penyesuaian minimum yang diperlukan agar aplikasi berjalan dengan baik di Duo dan memenuhi persyaratan baru untuk tangkapan layar khusus perangkat.

Meski begitu, saya tidak akan mengukur usahanya hanya berdasarkan jumlah pengguna yang akan memiliki iPhone Duo. Jika aplikasimu sudah memiliki antarmuka yang fleksibel, hasil yang layak mungkin hanya membutuhkan sedikit perubahan. Jika belum, menyesuaikan aplikasi untuk Duo dapat membantumu menemukan masalah yang juga akan muncul di tablet, jendela yang dapat diubah ukurannya, atau format perangkat di masa depan. Dalam hal ini, pekerjaan tersebut dapat memberikan manfaat yang melampaui perangkat ini.

Kesimpulan

iPhone Duo adalah mainan baru Apple dan memberi kita satu alasan lagi untuk meninjau bagaimana aplikasi berjalan ketika mendapat ruang yang jauh lebih luas. Seperti yang sudah saya jelaskan, saya menyarankan agar kamu tidak melihatnya sebagai “saya menyesuaikan aplikasi untuk iPhone Duo”, tetapi sebagai “saya menyesuaikan aplikasi untuk berbagai ukuran jendela”. Dengan begitu, pekerjaan ini tidak hanya bermanfaat bagi perangkat tersebut, tetapi juga tablet serta format perangkat lain saat ini maupun di masa depan.

Sampai jumpa lagi!