¿Está tu app Flutter preparada para el iPhone Duo?

El iPhone Duo, el primer iPhone plegable de Apple, salió a la venta el pasado 23 de octubre. Con él surgen muchas preguntas para quienes desarrollamos aplicaciones: ¿qué implicará a nivel de desarrollo? ¿Estaremos obligados a adaptar nuestras apps a este nuevo formato plegable? Y, si es así, ¿qué dificultades entraña? ¿Qué ocurre si no las adaptamos? ¿Cómo se verán cuando el dispositivo esté plegado y cuando esté desplegado? ¿Qué recursos ofrece Flutter para adaptar la interfaz?

En este artículo pretendo responder rápidamente a todas estas preguntas para que tengas claro qué está por venir si distribuyes aplicaciones para iOS. Además, al final te enseñaré una forma muy sencilla de adaptar la interfaz de tu app con poco esfuerzo para que se vea bien en el nuevo iPhone Duo.

El iPhone Duo cambia cómo se visualiza tu app

Para poder entender bien qué pasa cuando ejecutamos una app en el iPhone Duo, he preparado esta sencillísima app de ejemplo que simplemente ofrece una lista de notas, al pulsar en cada una de ellas navegamos a una pantalla donde podemos ver el contenido de la nota:

Ahora veamos qué ocurre si ejecuto esta misma app en un iPhone Duo. Primero te mostraré cómo se ve compilada con el SDK 27.1 de iOS, pero sin haber realizado ningún otro ajuste en la interfaz:

Como ves, la app se redimensiona para ocupar todo el espacio disponible. Con el dispositivo plegado no supone un gran problema, porque las dimensiones y la relación de aspecto de la pantalla exterior son relativamente parecidas a las de un iPhone convencional. Sin embargo, en cuanto el usuario lo despliega, una interfaz pensada para una ventana estrecha de smartphone se distribuye por todo el ancho de la pantalla interior. Funciona, pero no ofrece la mejor experiencia.

Adaptando Flutter al iPhone Duo

Por suerte para nosotros, Flutter dispone de una gran cantidad de widgets y recursos para adaptar la interfaz, no solo al iPhone Duo, sino a cualquier tamaño de ventana. De hecho, creo que la mentalidad correcta no es «voy a adaptar mi app Flutter al iPhone Duo», sino más bien «voy a adaptar mi app Flutter a nuevos tamaños». La idea es abstraernos del dispositivo físico y construir una interfaz responsive que reaccione de forma dinámica al espacio que tenga disponible.

Por ejemplo, con muy pocos ajustes podríamos realizar una adaptación como esta:

Como ves, cuando el Duo está plegado mantengo la distribución anterior. Al desplegarlo, aprovecho el ancho adicional de la pantalla interior para mostrar la lista de notas a la izquierda y el detalle de la nota seleccionada a la derecha.

Este efecto se puede conseguir de forma sencilla utilizando LayoutBuilder, un widget que nos proporciona las restricciones de tamaño que recibe de su widget padre. Cuando estas restricciones cambian (por ejemplo cuando cambia la orientación del dispositivo, o al plegar o desplegar el iPhone Duo), Flutter vuelve a ejecutar su builder, lo que nos permite elegir la interfaz apropiada según el espacio 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);
        },
      ),
    ),
  );
}

Además de LayoutBuilder, en este ejemplo utilizo SafeArea para mantener el contenido fuera de las zonas ocupadas por la interfaz del sistema, la cámara y las esquinas redondeadas. Flutter ofrece muchos otros recursos para crear interfaces adaptables: MediaQuery.sizeOf() permite consultar el tamaño actual de la ventana de la app; Expanded y Flexible distribuyen el espacio dentro de filas y columnas; y ConstrainedBox permite fijar límites mínimos o máximos para evitar que el contenido se estire demasiado. Y estos son solo algunos ejemplos: Flutter ofrece muchos más recursos para adaptar una interfaz al espacio disponible.

¿Estoy obligado a adaptar mi app al iPhone Duo? ¿Merece la pena?

Antes de entrar en si merece la pena adaptar tu app al iPhone Duo o qué nivel de sofisticación deberías aplicar, veamos primero el requisito anunciado por Apple que debes tener en cuenta:

Estos requisitos no obligan explícitamente a crear una interfaz específica para el iPhone Duo. Sin embargo, la exigencia de proporcionar capturas propias del dispositivo sí parece indicar que Apple espera que comprobemos cómo se comportan nuestras apps en él y que corrijamos, como mínimo, los problemas de adaptación más evidentes.

Ahora bien, ¿cuánto esfuerzo merece la pena dedicar a esta adaptación? La respuesta dependerá mucho del tipo de app y de lo que esperen sus usuarios. En mi caso, mis apps se utilizan principalmente en smartphones y la presencia de tablets entre mis usuarios es minúscula. Es razonable pensar que tampoco tendré demasiados usuarios con un iPhone Duo, así que probablemente realizaré la adaptación mínima necesaria para que mis apps funcionen correctamente en él y para cumplir con el nuevo requisito de capturas específicas del dispositivo.

Aun así, no mediría el esfuerzo únicamente en función de cuántos usuarios vayan a tener un iPhone Duo. Si tu app ya cuenta con una interfaz flexible, lograr un resultado razonable puede requerir muy pocos cambios. Y, si no es así, adaptar la app al Duo puede ayudarte a detectar problemas que también aparecerán en tablets, ventanas redimensionables o futuros formatos. En ese sentido, el trabajo puede tener valor más allá de este dispositivo.

Conclusión

El iPhone Duo es el nuevo juguete de Apple y nos da un motivo más para revisar cómo se comportan nuestras apps cuando disponen de mucho más espacio. Como ya he comentado, mi recomendación es no plantearlo como «voy a adaptar mi app al iPhone Duo», sino como «voy a adaptar mi app a distintos tamaños de ventana». De esta forma, el trabajo no solo beneficiará a este dispositivo, sino también a tablets y a otros formatos presentes o futuros.

¡Hasta la próxima!