Acessibilidade nos seus apps é sempre algo importantíssimo. Você garante que mesmo pessoas com limitações físicas consigam usar o seu app. E vamos ver como garantir que seu app seja acessível com Flutter.

Como saber se seu app é acessível ?

Existem algumas ferramentas que podem ser usada para analisar como está a acessibilidade no seu app. Essas ferramentas podem ser:

• Inspetores de Acessibilidade: Tais como scanner de acessibilidade, app exclusivo para Android. E o inspetor de acessibilidade, que está disponível para iOS como ferramenta do desenvolvedor.
• Leitores de tela: Que são usados para ler o app. Ferramenta disponível para Android chamado talkback, e o VoiceOver no iOS. Ele ler o conteúdo da tela para que pessoas com limitações visuais possam usar os apps.
• Simulador de daltonismo: Como o Color Adobe, onde você pode simular como uma pessoa daltônica enxergaria as telas do seu app.

Criando widgets acessíveis

O Flutter já tem todos os seus Widgets acessíveis, mas há situações onde é necessário adicionar uma descrição ou alterar o conteúdo lido pelos leitores de texto. Como nos exemplos abaixo:

• Alterando conteúdo lido pelos inspetores de texto:

Você pode usar algumas propriedades para alterar o texto que será lido pelo leitor de texto, tais como semanticLabel ou tooltip. Isso com certeza será útil para quando você tiver textos com símbolos monetários, ou de unidade de medida, ou quer adicionar uma legenda para uma imagem, ou uma dica para ícones, ou imagens dentro do seu app. Avalie bem o que será sobrescrito para evitar, sobrescrever informações desnecessariamente.

• O Semantics Widget

O semantics é um widget que envolve outros widgets, com o intuito de fornecer novas informações para os leitores de texto, como sobrescrever textos lidos, evitar um um texto seja lido, alterar a ordem de leitura de uma tela, e etcs. Vamos ver como fazer um pouco dessas possibilidades

A ordem de leitura seguindo o código acima:

Checklist para manter seu app acessível

Quando você estiver desenvolvendo seu app, você pode usar esse checklist abaixo para garantir que seu app está no caminho certo.

• Mantenha textos fáceis para ler com tamanhos maiores.
• Use os leitores de tela, para checar a experiência das pessoas com limitações visuais teria no seu app.
• Fique atento aos constrastes entre textos e fundos, ou textos em imagens, ou mudança de cores. Para que todos possam conseguir ler seus conteúdos mais facilmente.
• Use de feedbacks visuais como snackbar em interações no app que realizam ações que não tem resultado claro.
• Cheque se seus Widgets conseguem aumentar ou diminuir de tamanho quando ferramentas de acessibilidade que dão zoom no sistema estiver habilitada.

Conclusão

Nosso trabalho como desenvolvedor é proporcionar a melhor experiência para todos que usem nossos apps. E tornando seu app mais acessível, você garante que mesmo pessoas com limitações físicas conseguiam usar seus apps normalmente.

Todo conteúdo usado aqui foi testado, e pode ser consultado no repositório do github.

iranjunior/acessibility_flutter

Obrigado por ter chegado até aqui. Se esse conteúdo foi útil para você, reage aqui, para levarmos mais conhecimento em Flutter para todo o Brasil ! 🇧🇷🚀

Criar versões diferentes do mesmo app, é bastante interessante quando você tem ambientes diferentes para uma aplicação, por exemplo ambientes de desenvolvimento, homologação(ou uat), e produção. Essa técnica é chamada de flavors. E adotando esse recurso no seu app flutter você pode ter uma versão do app apontando para serviços de backend de produção, enquanto outra versão aponta para ambientes de homologação por exemplo. Pode ter features toggles diferentes para cada ambiente. Ou mesmo desabilitar um criterio de segurança, para um ambiente de dev, mas manter-lo em funcionamento em prod por exemplo.

Esse é um recurso muito aplicado em grandes empresas, já que você pode ter o time de QA validando o app, com a versão de UAT, e a equipe de desenvolvimento a todo vapor com as versões de dev. E se você numa implementou, fica aqui até o final que te mostro como implementar.

Como criar Flavors em apps flutters ?

Existem algumas maneiras de criar flavors de apps flutter, você pode fazer a configuração nativa para cada sistema operacional (Android e iOS) indo diretamente na configuração dos builds no gradle para o andorid, ou mesmo criando os schemas dentro do xcode para apps iOS. A vantagem de fazer esse tipo de configuração é que é pode ser usado tanto para Flutter, como para apps React Native. Isso porque você está fazendo as configurações manualmente.

Mas nesse post vamos usar uma pacote flutter para automatizar a criação dos flavors para nosso app, o flutter_flavorizr. Ele será o responsável pela criação dos builds para cada flavor. E gerará arquivos importantes para que possamos fazer nosso app reagir da maneira correta para cada ambiente.

Mas para não deixar nada em aberto, vou deixar uns links com tutorias de como configurar os flavors, dentro do Android e do iOS

Configurando app

Toda a configuração do flavor pode ser feita dentro do pubspec.yaml, como pode ser visto abaixo:

Você pode configurar ids diferentes, conexões com o firebase e outros valores para cada ambiente.

E para criar esses ambientes, você deve executar:

flutter pub run flutter_flavorizr

Executando o app na versão adequada

Para rodar o app em cada ambiente você pode executar:

flutter run --flavor {dev/homolog/prod} -t lib/main-{dev/homolog/prod}.dart # Para ambiente de dev

Se você criou ambientes diferentes desses, substitua para o nome que você criou.

Caso você esteja rodando pelo vscode, você pode configurar o launch.json para executar o código no ambiente que desejar. Algo como:

Alterando ícone para cada ambiente

Você pode alterar o ícone para cada ambiente manualmente. Criando os arquivos de ícones, dentro de cada ambiente. Mas nesse post vamos automatizar isso com a lib flutter_launcher_icons. Para configurar os ícones para cada ambiente você deve criar os arquivos de configuração referente a estes ambientes. Como o exemplo abaixo:

E quando criar os arquivos você deve executar o comando abaixo para criar os ícones.

flutter pub run flutter_launcher_icons:main -f flutter_launcher_icons-${ambiente}.yaml

Caso para o iOS não funcione, você precisará no xcode marcar o os ícones corretos para cada flavor. Como Baixo:

O resultado final deve ser algo parecido com isso:

Adequando o app para cada ambiente

O plugin do flutter_flavorizr gera um arquivo chamado flavors.dart, com ele você pode criar getters que podem ser úteis para chamar apis diferentes, categorias de logs, ou mesmo ativar ou não um recurso. Vou deixar um exemplo, para que fique mais claro como usar.

Mas lembre-se de realizar as adequações dentro do seu app da forma mais adequada para a estrutura no qual ele. Afim de não prejudicar a estrutura existente.

Imagens dos apps diferentes para cada ambiente:

Conclusão

Os flavors é um recurso fantástico e com um poder absurdo. É importantíssimo para grandes aplicações, com vários times/squads atuando e trabalhando no mesmo app. Onde você consegue manter versões apenas com features estáveis, e prontas para produção. E tudo isso mantendo uma versão livre para que o time de desenvolvimento possa está a todo vapor no desenvolvimento.

Todo conteúdo usado aqui foi testado, e pode ser consultado no repositório do github.

iranjunior/flavors_flutter

Obrigado por ter chegado até aqui. Se esse conteúdo foi útil para você, reage aqui, para levarmos mais conhecimento em Flutter para todo o Brasil !

Os registros de bugs e crash dentro de seu app são essenciais para aplicações que estão preocupadas em estar sempre melhorando. Com os dados gerados por esses registros o time de desenvolvimento irá conseguir sanar os principais problemas que podem está acontecendo na sua aplicação. Vamos ver como realizar esses registro no flutter. Para isso vamos conhecer o que crashlytics.

O que é crashlytics ?

É uma ferramenta que coleta falhas em aplicativos e gera relatórios dessas falhas. Usando uma ferramenta de crashlytics você pode “triggar” pessoas quando acontecer muitas falhas, acompanhar o histórico de bugs, listas as ocorrências mais recorrentes ou as mais impactantes, gerar métricas de quanto você deixa de rentabilizar por causa das falhas, ou mesmo o quanto de acesso perdido devido a bugs recorrentes.

Ou seja, ela pode gerar muitos insights para que a sua equipe de negócio possa tomar as melhores decisões.

Como funciona o crashlytics ?

O funcionamento do crashlytics pode mudar dependendo de qual serviço você está usando, mas de modo geral:

1. O crashlytics fica no seu app “vendo” tudo o que está acontecendo.
2. Quando há uma falha ele captura essa falha e lança para o serviço gerador de relatórios.

Você pode criar sua própria ferramenta de crashlytics que funcione desse jeito, ou usar serviços já prontos como o Firebase e sentry. Mas o importante é obter os dados.

Nesse post vamos usar o firebase, mas em posts futuros teremos com o sentry também.

Criando um projeto no firebase

Nesse post vamos usar o firebase para coletar as falhas. Mas vamos ignorar a configuração inicial do firebase e focar apenas na configuração e utilização do crashlytics.

Android:

iOS:

Inserindo erros manualmente no crashlytics

Dependendo do seu aplicativo você talvez só precise monitorar uma parte do seu app. Você pode fazer isso inserindo dados "manualmente" no crashlytics. Como pode ser visto no snippet abaixo:

Resultado no Crashlytics:

Inserindo uma zona de captura

O mais comum nos grandes apps é criar uma zona de captura de erro. Isso pode ser útil para capturar todos os erros que podem acontecer numa parte do seu app. No exemplo abaixo eu crio uma zona de captura que abrange o app inteiro, mas é importante que seja criado zonas menores para que identifica melhor os erros que podem acontecer dentro de um recurso específico do seu app. Vamos ao exemplo:

Inserindo erros fora da estrutura do Flutter

Você também pode ficar monitorando erros que acontecem fora do flutter, mas ainda no escopo do seu app. Isso pode ser útil para entender como seu app reage a esse tipo de falha, e como o seu time de engenharia consegue atuar nesse tipo de problema.

Criando chaves para geração de filtros

Você pode criar chaves para os registros dos erros nos usuários. Isso pode ser útil para realização de filtros, ou gerar métricas mais específicas. Você pode registrar chaves para usuários, ou features dentro do app, e usar essas chaves para geração de gráficos mais inteligentes, insights interessantes para correção de bugs, ou mesmo encontrar tentativas de ataque ao seu app. Vamos ver como fazer isso no exemplo abaixo:

Saída no firebase:

Conclusão

Os registros de bugs e crash dentro de seu app são essenciais para aplicações que estão preocupadas em estar sempre melhorando. Com o flutter é muito simples de implementar, esses registros. Então use esse recurso visto aqui e fique a vontade para me consultar nas minhas redes para retirada de dúvidas.

Obrigado por ter chegado até aqui. Se esse conteúdo foi útil para você, reage aqui, para levarmos mais conhecimento em Flutter para todo o Brasil !