Flutter - Builder Pattern - Gerando textos estilizados

Wesley Oliveira — Thu, 11 Feb 2021 15:10:52 +0000

Recentemente comecei a estudar um pouco de Swift/IOS para poder "sair do 0", saber como funciona as coisas nesse mundo até então desconhecido para mim.

Resolvi fazer um curso básico no site, Raywenderlich , que por sinal um excelente curso.

Logo no começo do curso achei diferente a forma como são gerados os componentes visuais, diferente das widgets do flutter lá tudo são views.

A forma como são geradas essas views lembram bastante o design pattern builder ¹, como pode ser visto abaixo.

¹ Caso não tenha conhecimento sobre esse padrão sugiro assistir esse vídeo Builder Pattern.

Transformando a view acima para flutter teriamos algo semelhante a isto:

Como pode ser visto tem uma grande diferença na forma como são criados.

A partir desse ponto, irei focar apenas no flutter.

O Problema

Imagine uma situação onde em uma mesma linha deva ter diversos estilos textuais aplicados, por exemplo.

Texto em negrito, texto em italico, texto normal.

Flutter tem o poder de transformar isso em tarefa bem simples, aplicando apenas uma Text com alguns TextSpan isso se torna uma tarefa fácil como está na imagem abaixo.

E se forem mais estilos, 10, 20, claro que isso é um cenário difícil de acontecer, mas caso aconteça, o quanto esse widget iria crescer?

Solução proposta

Pensando nesse improvável panorama, lembrei da implementação do IOS e com o pattern Builder, pensei em tentar adaptar para o flutter.

Depois de algum tempo estudando, cheguei a esse pequeno esboço.

Flutter Gerador Textos Estilizados

A implementação foi feita seguindo o Builder pattern, e para utiliza-lo ficou bastante simples.

Como tudo no mundo da programação, não existe uma bala de prata! Existem N cenários e cada um deve ser avaliado a melhor opção, além de que isso é apenas uma ideia de algo pode ou não ser útil para alguém, mas afim de compartilhar um aprendizado resolvi escrever esse post.

Flutter Image File Upload - Base64 x MultiPart Form

Wesley Oliveira — Mon, 11 Jan 2021 14:34:34 +0000

Recentemente comecei a pesquisar diferentes temas que poderiam ser utilizados para escrever algum conteúdo, foi aí que um amigo escreveu o primeiro artigo e utilizou de um problema que aconteceu em seu dia a dia para transformá-lo em uma ideia de artigo, para escrever esse pequeno artigo resolvi tentar da mesma maneira.

Passamos por uns erros no quesito de upload de uma imagem para a api via Base64, resolvi então mostrar aqui alguns problemas dessa abordagem e uma alternativa para a mesma.

Base64 é um método para codificação de dados para transferência na Internet. É utilizado frequentemente para transmitir dados binários por meios de transmissão que lidam apenas com texto, como por exemplo para enviar arquivos anexos por e-mail.

Para converter um arquivo para Base64 no flutter é muito simples vide código baixo:

File file = await ImagePicker.pickImage(source: ImageSource.camera);
String base64 = base64Encode(file.readAsBytesSync());

¹ ImagePicker - Plugin Flutter para iOS e Android para selecionar imagens da galeria ou tirar uma nova foto com a câmera. Link

Obtido o Base64, o mesmo pode ser enviado no body de uma requisição post por exemplo.

Problemas com Base64

Respostas de API ficam muito grandes

Respostas muito grandes tendem a levar mais tempo para serem processadas dando mais tempo para uma possível falha na rede e aumentando o consumo de dados do dispositivo.

Oversizing

O tamanho da imagem codificada em Base64 é aproximadamente 30% maior do que a imagem binária original.

A experiência do usuário é afetada negativamente.

Incluindo os retornos junto com outras respostas da API, o aplicativo irá esperar carregar todos os dados antes de exibir informações na tela, afetando assim a experiência do usuário que verá uma tela de carregamento por mais tempo.

O armazenamento em cache de imagens no dispositivo não é mais possível.

Imagens enviadas para o dispositivo via Base64 tornará irrelevante qualquer implementação de serviços de cache de armazenamento de imagens.

Recursos nativos do flutter como o precacheImage tornam-se inutilizáveis nesta situação, já que toda vez será necessário fazer o decode do base64.

Outra implementação que se torna inutilizável seria o cachedNetworkImage, outra implementação nativa do flutter, mas que não pode ser aplicada ao contexto de um Base64.

Para aplicativos que possam funcionar tanto online quanto offline, a utilização de cache de imagens é um recurso bem eficaz para melhor experiência do usuário.

Vantagens do Base64

Remover a necessidade de múltiplos request, para obtenção de dados. ²
Imagens codificadas como Base64 podem ser armazenadas em bancos de dados e gerados novos arquivos. ² Como foi mostrado antes, essa abordagem pode ser uma vantagem ou uma desvantagem a depender do contexto e da implementação

Multipart Form Data

É uma de três formas de codificação existentes no HTML sendo elas:

1.application/x-www-form-urlencoded
2.multipart/form-data
3.text/plain

Deve-se utilizar esta forma de codificação quando a requisição possuir algum arquivo que deve fazer upload
É compatível com todos os navegadores.
Suporta arquivos com tamanhos muito grandes.

Utilizando multipart com Flutter

File file = await ImagePicker.pickImage(source: ImageSource.camera);
final multiPartdata = await MultipartFile.fromFile(file.path);
final formData = FormData.fromMap({
     "file": multiPartdata,
});

Desta maneira o servidor da API deve estar preparado para receber requisições com o cabeçalho multipart/form-data, já que o conteúdo não irá junto com o body da requisição caso o mesmo exista.

Alguns servidores de storage como aws.s3, cloudinary, firebase cloud storage, estão preparados para receberem requisições nesse formato, possuindo libs para integração direta em Flutter, dispensando a necessidade da criação de uma api própria.

Resolvendo o Oversizing

Algumas estratégias podem ser admitidas a fim de reduzir o oversizing, a mais comum são os famosos thumbnails, algumas alternativas mais recentes que têm grande aplicabilidade a depender do contexto seriam o blurHash e a Dominant color abaixo explico o funcionamento de ambas.

Thumbnails

Uma thumbnail é uma imagem comprimida que prevê a imagem original. Elas são mais leves e podem ser utilizadas para diversos fins. Por exemplo, um dos propósitos da utilização dessa thumb é reduzir o tempo de carregamento de alguma pagina na internet, para tornar o acesso mais rápido ao usuário. Então, uma thumbnail de uma foto maior, seria uma versão reduzida dela mesma.

Em essência, a principal função de uma miniatura é trazer uma informação ao usuário de maneira mais rápida.

Blurhash

“BlurHash is a compact representation of a placeholder for an image”.

Blurhash é uma representação compacta de um espaço reservado para uma imagem. Esta é a definição dada pelos desenvolvedores. Trata-se de uma biblioteca que converte uma imagem para uma versão ofuscada e compactada de sua versão.
Essa biblioteca possui implementações para diversas linguagens, typescript, kotlin, swift, python, C, entre outras. Segue abaixo uma visão da mesma.

Dominant color

Trata-se apenas de pegar a cor de maior incidência na imagem, e utilizá-la no local da mesma. Estratégia bastante parecida com o blurHash, a diferença seria apenas o resultado final da imagem.