Vissza a bloghoz

ProCat Solutions

Ma érkezik az iPhone Duo, és a Flutter-appok egy része csíkkal körbevéve indul el rajta

A hajtogatható iPhone a régi appokat kis ablakban futtatja. Mit kell átállítani egy Flutter-appban, mit ad és mit nem ad a keretrendszer, és mire kell figyelni.

ProCat Solutions iPhone DuoFlutteriOS 27.1FoldableMobilfejlesztés
Megosztás
Ma érkezik az iPhone Duo, és a Flutter-appok egy része csíkkal körbevéve indul el rajta

Aki ma kinyitja az új iPhone Duót, és elindít egy tavaly frissített appot, egy kisebb ablakot lát fekete sávokkal a 7,6 hüvelykes belső kijelző közepén. Az Apple ezt szándékosan csinálja: a hajtogatható telefonon csak az iOS 27.1 SDK-val fordított appok töltik ki a teljes belső kijelzőt. Minden más úgy fut, mintha egy kisebb iPhone-on lenne.

Az Apple szeptember 9-én mutatta be az iPhone Duót, az előrendelés október 16-án indult, a szállítási idők a MacRumors szerint perceken belül 2027 elejére csúsztak. A készülék zárva 5,4, nyitva 7,6 hüvelykes, az ára 1999 dollártól indul. 2027 áprilisától minden App Store-ba beküldött appnak iPhone Duo-képernyőképekkel is rendelkeznie kell.

Félig hajtott, hajtogatható telefon az íróasztalon, kétoszlopos alkalmazással

Mit kapnak ingyen a natív appok

Az Apple szerint a szabványos SwiftUI- és UIKit-elemekből épült appok maguktól alkalmazkodnak: a vezérlők a kéz ügyébe, oldalra kerülnek, a belső kijelzőn több oszlopra bomlanak, félig hajtott állásban pedig a gombok elhúzódnak a hajtásvonaltól. Az iOS 27.1 SDK-ban új API-k jöttek a tartalom két félre osztásához és a lefoglalt területek kezeléséhez, egy zsanér-API pedig megmondja, milyen szögben áll a kijelző. Az Xcode 27.1 új Device Hubjában a szimulált Duót ki lehet nyitni, össze lehet csukni és félbe lehet hajtani.

A Flutter hátránya

A Flutter nem a rendszer vezérlőit használja, hanem maga rajzolja ki a felületet, ezért ebből az automatikus alkalmazkodásból semmit nem kap. A keretrendszer a hajtásról szóló adatot egy erre kitalált helyen adná át, a MediaQuery.displayFeatures mezőben, a dart:ui dokumentációja szerint azonban ez a mező csak Androidon töltődik fel. iOS-en üres marad.

A hiány pótlására már a Flutter GitHub-oldalán is van javaslat (#192515), és megjelentek közösségi csomagok is, például a duo_display és a duo_flex. Ezek a natív UIKit-adatokból olvassák ki a zsanér helyét, a hajtás állását (csukott, félig nyitott, teljesen nyitott) és a kamera kivágását, és oda teszik, ahol a Flutter-kód már keresi őket. A csomagok újak, ezért éles appban érdemes ezt a réteget saját kódként kezelni, amit érteni és javítani tudunk, ha a következő iOS-frissítés megváltoztat valamit.

Fejlesztő kinyitott hajtogatható telefonon tesztel, mellette laptop kóddal

Mellette és ellene

Ami a Flutter mellett szól:

  • Egy kódbázisból készül az Android-foldable, a hagyományos iPhone és az iPhone Duo változat. Az Android-hajtogathatókhoz a displayFeatures már ma is működik.
  • A LayoutBuilder és a reszponzív elrendezések ugyanúgy működnek a belső kijelzőn, a kétoszlopos nézet logikája egyszer készül el.
  • A felület pixelre azonos minden platformon, ami márkaérzékeny appoknál számít.

Ami ellene szól:

  • A natív appok automatikus alkalmazkodását kézzel kell megírni: vezérlők áthelyezése, hajtásvonal kerülése, oszlopokra bontás.
  • A zsanér és a hajtás adataihoz ma közösségi csomag vagy saját natív híd kell.
  • Az új iOS-funkciók rendszerint késve jelennek meg a Flutterben; aki elsőként akar egy Duo-specifikus funkciót, natívan gyorsabb.

Mire kell figyelni

  • Újrafordítás az iOS 27.1 SDK-val. Enélkül az app a belső kijelzőn kis ablakban fut. Ez a legolcsóbb és legfontosabb lépés.
  • Ne csak a szélességből döntsünk. Az iPhone Duón a szélesség önmagában nem mondja meg a méretosztályt; a natív méretosztályt is érdemes átvenni.
  • A hajtásvonal. Gomb, szövegmező vagy fontos szöveg ne kerüljön a gyűrődés fölé félig hajtott állásban.
  • Folytonosság. Kinyitáskor és összecsukáskor az app ne indítson újra képernyőt, és ne vesszen el a beírt adat vagy a görgetési pozíció.
  • Tesztelés minden állásban. Csukva, nyitva, félbe hajtva, elforgatva, a Device Hubban és ha lehet, valódi készüléken.
  • Képernyőképek áprilisra. Az App Store-beküldéshez Duo-képernyőképek kellenek, ezt érdemes a következő kiadásba betervezni.
Két kéz kinyit egy vékony, hajtogatható telefont

Ahol segíteni tudunk

Flutterben és natívan is fejlesztünk mobilappokat. Egy meglévő Flutter-app Duo-átállása nálunk három lépésből áll: újrafordítás az iOS 27.1 SDK-val és a letterbox megszüntetése, egy kis natív híd a zsanér- és hajtásadatokhoz, végül a kétoszlopos elrendezés és a hajtásvonal kezelése a fontos képernyőkön. Ha az app mögött SaaS-backend is fut, azt is visszük: mobil- és SaaS-fejlesztés.

Források

Megosztás
Széchenyi Terv Plusz kedvezményezetti infoblokk
QR Code