Aplicativos responsivos e adaptativos | Flutter

Você está criando aplicativos multiplataforma que podem ser executados no Android, iOS, macOS, Linux ou em qualquer outra máquina que você queira que seja executada? Independentemente da linguagem de programação escolhida, você deve estar ciente de como seu aplicativo será exibido quando você alternar entre os diferentes dispositivos.

Há uma diferença muito pequena entre um aplicativo responsivo e um aplicativo adaptável.

Aplicativo responsivo

De acordo com o documento oficial do flutter, um aplicativo responsivo tem seu layout ajustado para o tamanho de tela disponível. Quando você está escrevendo o código, está se certificando de que, se mudar o dispositivo, seu aplicativo terá a mesma aparência em todos os dispositivos. O tamanho dos widgets será alterado de acordo com a largura e a altura do dispositivo. O tamanho do botão será alterado ao mudar o dispositivo e muitos outros aspectos.

Aqui estão alguns dos widgets que podemos usar para tornar nosso aplicativo responsivo:

• AspectRatio
• CustomSingleChildLayout
• CustomMultiChildLayout
• FittedBox
• FractionallySizedBox
• LayoutBuilder
• MediaQuery
• MediaQueryData
• OrientationBuilder

Mas e quanto à experiência do usuário (UX)? Você acha que a mesma interface do usuário funcionará em dispositivos móveis, na Web e no desktop? A resposta é um grande não.

Principais diferenças entre aplicativos móveis e da Web/desktop.

1. No celular, você tem controles por gestos, como clicar, pressionar longamente, arrastar etc. Por outro lado, na Web, você tem controles como passar o mouse, clicar com o cursor, clicar com o botão esquerdo, clicar com o botão direito etc.
2. Ao usar o aplicativo em ambos os casos, o usuário tem uma psicologia muito diferente.
3. O tamanho da tela, é claro. No celular, você tem uma visualização muito compacta, bem como recursos. Você não pode exibir imagens pesadas ou grandes. Não é possível exibir textos grandes. Mas na Web, você tem muito espaço para fornecer muitas informações. Mas não o torne confuso.
4. A fonte que você está usando deve ser adequada para o cliente final. Por exemplo, você não pode usar fontes sofisticadas para aplicativos de saúde. Ou não pode usar texto de jornal em aplicativos sociais como o Instagram 😅.

Dica profissional 1: Sempre que escrever código, dê um passo atrás e pense no usuário final e na psicologia dele.

O que os usuários podem esperar ao clicar nesse botão? A mensagem/dica de ferramenta fornecida está convencendo adequadamente a sua mensagem ou não? Os ícones que você está usando estão interpretando claramente o uso deles ou não? A posição do widget é adequada e acessível ou não? Para isso, podemos considerar os aplicativos adaptáveis.

Aplicativos adaptáveis

De acordo com o documento oficial, a adaptação de um aplicativo para ser executado em diferentes tipos de dispositivos, como móvel e desktop, requer lidar com a entrada do mouse e do teclado, bem como com a entrada por toque. Isso também significa que há expectativas diferentes sobre a densidade visual do aplicativo, como funciona a seleção de componentes (menus em cascata versus folhas inferiores, por exemplo), o uso de recursos específicos da plataforma (como janelas de nível superior) e muito mais.

Algumas dicas que devem ser observadas ao escrever aplicativos adaptáveis:

1. Use Bottom Navigation Bar em dispositivos móveis e use Navigation Rail na Web.
2. Para criar várias seções do seu painel, você pode usar SingleChildScrollView ou ListView para Web e TabBar com TabBarView para dispositivos móveis.
3. Use Clicks para mostrar a descrição no celular. Use o efeito hover para mostrar a descrição na Web.
4. Use a dica de ferramenta para mostrar a descrição do ícone no celular e o texto com o ícone na Web.
5. Use mais gráficos e menos texto no celular. Você pode usar texto com gráficos na Web.

Dica profissional 2: Sempre use o devtools para monitorar o desempenho do aplicativo, as chamadas de rede, a nova renderização de crianças e muito mais.