A tua app Flutter está preparada para o iPhone Duo?

O iPhone Duo, o primeiro iPhone dobrável da Apple, foi colocado à venda no passado dia 23 de outubro. Com ele surgem muitas perguntas para quem desenvolve aplicações: o que implicará ao nível do desenvolvimento? Seremos obrigados a adaptar as nossas apps a este novo formato dobrável? E, se sim, que dificuldades isso implica? O que acontece se não as adaptarmos? Como serão apresentadas quando o dispositivo estiver dobrado e quando estiver desdobrado? Que recursos oferece o Flutter para adaptar a interface?

Neste artigo pretendo responder rapidamente a todas estas perguntas para que tenhas claro o que aí vem se distribuis aplicações para iOS. Além disso, no final vou mostrar-te uma forma muito simples de adaptar a interface da tua app com pouco esforço para que fique bem no novo iPhone Duo.

O iPhone Duo muda a forma como a tua app é apresentada

Para percebermos bem o que acontece quando executamos uma app no iPhone Duo, preparei esta app de exemplo extremamente simples. Limita-se a apresentar uma lista de notas e, ao tocar numa delas, navegamos para um ecrã onde podemos ver o conteúdo da nota:

Vejamos agora o que acontece se executar esta mesma app num iPhone Duo. Primeiro vou mostrar-te como fica quando é compilada com o SDK 27.1 do iOS, mas sem ter feito qualquer outro ajuste à interface:

Como podes ver, a app é redimensionada para ocupar todo o espaço disponível. Com o dispositivo dobrado, isto não representa um grande problema, porque as dimensões e a proporção do ecrã exterior são relativamente semelhantes às de um iPhone convencional. No entanto, assim que o utilizador o desdobra, uma interface concebida para uma janela estreita de smartphone distribui-se por toda a largura do ecrã interior. Funciona, mas não oferece a melhor experiência.

Adaptar o Flutter ao iPhone Duo

Felizmente para nós, o Flutter disponibiliza uma grande quantidade de widgets e recursos para adaptar a interface, não apenas ao iPhone Duo, mas a qualquer tamanho de janela. Na verdade, penso que a mentalidade correta não é «vou adaptar a minha app Flutter ao iPhone Duo», mas sim «vou adaptar a minha app Flutter a novos tamanhos». A ideia é abstrairmo-nos do dispositivo físico e construir uma interface responsiva que reaja de forma dinâmica ao espaço que tem disponível.

Por exemplo, com muito poucos ajustes poderíamos fazer uma adaptação como esta:

Como podes ver, quando o Duo está dobrado mantenho a distribuição anterior. Ao desdobrá-lo, aproveito a largura adicional do ecrã interior para mostrar a lista de notas à esquerda e o detalhe da nota selecionada à direita.

Este efeito pode ser conseguido facilmente utilizando o LayoutBuilder, um widget que nos fornece as restrições de tamanho que recebe do seu widget pai. Quando estas restrições mudam, por exemplo quando muda a orientação do dispositivo ou quando dobramos ou desdobramos o iPhone Duo, o Flutter volta a executar o seu builder, permitindo-nos escolher a interface adequada de acordo com o espaço disponível:

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

Além do LayoutBuilder, neste exemplo utilizo o SafeArea para manter o conteúdo fora das zonas ocupadas pela interface do sistema, pela câmara e pelos cantos arredondados. O Flutter oferece muitos outros recursos para criar interfaces adaptáveis: MediaQuery.sizeOf() permite consultar o tamanho atual da janela da app; Expanded e Flexible distribuem o espaço dentro de linhas e colunas; e ConstrainedBox permite definir limites mínimos ou máximos para evitar que o conteúdo se estique demasiado. E estes são apenas alguns exemplos: o Flutter oferece muitos mais recursos para adaptar uma interface ao espaço disponível.

Sou obrigado a adaptar a minha app ao iPhone Duo? Vale a pena?

Antes de avaliarmos se vale a pena adaptar a tua app ao iPhone Duo ou que nível de sofisticação deves aplicar, vejamos primeiro o requisito anunciado pela Apple que deves ter em conta:

Estes requisitos não te obrigam explicitamente a criar uma interface específica para o iPhone Duo. No entanto, a exigência de fornecer capturas próprias do dispositivo parece indicar que a Apple espera que verifiquemos como as nossas apps se comportam nele e que corrijamos, pelo menos, os problemas de adaptação mais evidentes.

Mas quanto esforço vale a pena dedicar a esta adaptação? A resposta dependerá muito do tipo de app e do que os seus utilizadores esperam. No meu caso, as minhas apps são utilizadas principalmente em smartphones e a presença de tablets entre os meus utilizadores é mínima. É razoável pensar que também não terei muitos utilizadores com um iPhone Duo, por isso provavelmente farei a adaptação mínima necessária para que as minhas apps funcionem corretamente nele e para cumprir o novo requisito de capturas específicas do dispositivo.

Ainda assim, não avaliaria o esforço apenas em função do número de utilizadores que terão um iPhone Duo. Se a tua app já tiver uma interface flexível, alcançar um resultado razoável pode exigir muito poucas alterações. Caso contrário, adaptar a app ao Duo pode ajudar-te a detetar problemas que também aparecerão em tablets, janelas redimensionáveis ou formatos futuros. Nesse sentido, o trabalho pode ter valor para além deste dispositivo.

Conclusão

O iPhone Duo é o novo brinquedo da Apple e dá-nos mais um motivo para rever como as nossas apps se comportam quando dispõem de muito mais espaço. Como já referi, a minha recomendação é não encarar isto como «vou adaptar a minha app ao iPhone Duo», mas sim como «vou adaptar a minha app a diferentes tamanhos de janela». Desta forma, o trabalho não beneficiará apenas este dispositivo, mas também tablets e outros formatos atuais ou futuros.

Até à próxima!