Està la teva app Flutter preparada per a l'iPhone Duo?

L’iPhone Duo, el primer iPhone plegable d’Apple, va sortir a la venda el passat 23 d’octubre. Amb ell sorgeixen moltes preguntes per als qui desenvolupem aplicacions: què implicarà pel que fa al desenvolupament? Estarem obligats a adaptar les nostres apps a aquest nou format plegable? I, si és així, quines dificultats comportarà? Què passa si no les adaptem? Com es veuran quan el dispositiu estigui plegat i quan estigui desplegat? Quins recursos ofereix Flutter per adaptar la interfície?

En aquest article pretenc respondre ràpidament a totes aquestes preguntes perquè tinguis clar què ens espera si distribueixes aplicacions per a iOS. A més, al final t’ensenyaré una manera molt senzilla d’adaptar la interfície de la teva app amb poc esforç perquè es vegi bé al nou iPhone Duo.

L’iPhone Duo canvia com es visualitza la teva app

Per entendre bé què passa quan executem una app a l’iPhone Duo, he preparat aquesta senzillíssima app d’exemple. Simplement mostra una llista de notes i, quan en toquem una, naveguem a una pantalla on podem veure’n el contingut:

Ara vegem què passa si executo aquesta mateixa app en un iPhone Duo. Primer t’ensenyaré com es veu compilada amb l’SDK 27.1 d’iOS, però sense haver fet cap altre ajust a la interfície:

Com pots veure, l’app es redimensiona per ocupar tot l’espai disponible. Amb el dispositiu plegat no suposa un gran problema, perquè les dimensions i la relació d’aspecte de la pantalla exterior són relativament semblants a les d’un iPhone convencional. Tanmateix, tan bon punt l’usuari el desplega, una interfície pensada per a una finestra estreta de smartphone es distribueix per tota l’amplada de la pantalla interior. Funciona, però no ofereix la millor experiència.

Adaptant Flutter a l’iPhone Duo

Per sort per a nosaltres, Flutter disposa d’una gran quantitat de widgets i recursos per adaptar la interfície, no només a l’iPhone Duo, sinó a qualsevol mida de finestra. De fet, crec que la mentalitat correcta no és «adaptaré la meva app Flutter a l’iPhone Duo», sinó més aviat «adaptaré la meva app Flutter a noves mides». La idea és abstreure’ns del dispositiu físic i construir una interfície responsive que reaccioni de manera dinàmica a l’espai que tingui disponible.

Per exemple, amb molt pocs ajustos podríem fer una adaptació com aquesta:

Com pots veure, quan el Duo està plegat mantinc la distribució anterior. En desplegar-lo, aprofito l’amplada addicional de la pantalla interior per mostrar la llista de notes a l’esquerra i el detall de la nota seleccionada a la dreta.

Aquest efecte es pot aconseguir fàcilment utilitzant LayoutBuilder, un widget que ens proporciona les restriccions de mida que rep del seu widget pare. Quan aquestes restriccions canvien, per exemple quan canvia l’orientació del dispositiu o quan pleguem o despleguem l’iPhone Duo, Flutter torna a executar el seu builder, cosa que ens permet triar la interfície apropiada segons l’espai disponible:

@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);
        },
      ),
    ),
  );
}

A més de LayoutBuilder, en aquest exemple utilitzo SafeArea per mantenir el contingut fora de les zones ocupades per la interfície del sistema, la càmera i les cantonades arrodonides. Flutter ofereix molts altres recursos per crear interfícies adaptables: MediaQuery.sizeOf() permet consultar la mida actual de la finestra de l’app; Expanded i Flexible distribueixen l’espai dins de files i columnes; i ConstrainedBox permet fixar límits mínims o màxims per evitar que el contingut s’estiri massa. I aquests són només alguns exemples: Flutter ofereix molts més recursos per adaptar una interfície a l’espai disponible.

Estic obligat a adaptar la meva app a l’iPhone Duo? Val la pena?

Abans d’entrar a valorar si val la pena adaptar la teva app a l’iPhone Duo o quin nivell de sofisticació hauries d’aplicar, vegem primer el requisit anunciat per Apple que has de tenir en compte:

Aquests requisits no obliguen explícitament a crear una interfície específica per a l’iPhone Duo. Tanmateix, l’exigència de proporcionar captures pròpies del dispositiu sí que sembla indicar que Apple espera que comprovem com s’hi comporten les nostres apps i que corregim, com a mínim, els problemes d’adaptació més evidents.

Ara bé, quant d’esforç val la pena dedicar a aquesta adaptació? La resposta dependrà molt del tipus d’app i del que esperin els seus usuaris. En el meu cas, les meves apps s’utilitzen principalment en smartphones i la presència de tauletes entre els meus usuaris és minúscula. És raonable pensar que tampoc tindré gaires usuaris amb un iPhone Duo, així que probablement faré l’adaptació mínima necessària perquè les meves apps hi funcionin correctament i per complir el nou requisit de captures específiques del dispositiu.

Tot i així, no mesuraria l’esforç únicament en funció de quants usuaris tindran un iPhone Duo. Si la teva app ja té una interfície flexible, aconseguir un resultat raonable pot requerir molt pocs canvis. I, si no és així, adaptar l’app al Duo et pot ajudar a detectar problemes que també apareixeran en tauletes, finestres redimensionables o formats futurs. En aquest sentit, la feina pot tenir valor més enllà d’aquest dispositiu.

Conclusió

L’iPhone Duo és la nova joguina d’Apple i ens dona un motiu més per revisar com es comporten les nostres apps quan disposen de molt més espai. Com ja he comentat, la meva recomanació és no plantejar-ho com «adaptaré la meva app a l’iPhone Duo», sinó com «adaptaré la meva app a diferents mides de finestra». D’aquesta manera, la feina no només beneficiarà aquest dispositiu, sinó també les tauletes i altres formats presents o futurs.

Fins a la pròxima!