O que aprendi utilizando as gerências de estado do Flutter.
Como modificar a gerência de estado de um aplicativo 3 vezes me ajudou a aprender muito sobre programação.
Em Outubro de 2019 decidi que iria tirar os planos de aprender a programar do papel e comecei a procurar algo pra começar, pesquisei por Python, JavaScript, mas como sempre tive muito interesse por mobile, acabei encontrando o Flutter e resolvi focar nele. Depois de acompanhar alguns cursos e vídeos de programadores mais experientes, cheguei a seguinte conclusão.
Vídeos com tutoriais são muito bons e ajudam no processo de aprendizado, mas você precisa programar junto e aplicar aquilo em um projeto próprio, essa é a melhor forma de ter aprendizado efetivo.
Com isso em mente, qual foi meu pensamento inicial? Vou ter uma ideia milionária de aplicativo e começar a desenvolver.
Logo caiu a ficha e eu me contentei em desenvolver algo que solucionasse um problema real e que estivesse dentro da minha capacidade técnica, deixando os planos do aplicativo milionário mais pra frente 😆.
O Aplicativo de Precificação de Projetos.
Para colocar o pouco que tinha aprendido em prática e começar a ter aprendizado real, decidi desenvolver um aplicativo para simplificar e otimizar o processo de precificação de projetos de Engenharia Civil da Engetec Engenharia Jr, uma Empresa Júnior na qual sou membro voluntário atualmente. O primeiro grande desafio foi aprender a gerenciar o estado da minha aplicação, mas o que é gerência de estado? De uma forma bem simplificada, é a maneira que você gerencia as mudanças na UI (Interface do Usuário) da sua aplicação a medida que o usuário interage com o aplicativo.
Para uma definição mais técnica, completa e formal sugiro acessar a aba “State Management” na documentação do Flutter clicando aqui.
Utilizando o setState.
Segundo a documentação do Flutter, o setState é um método da classe State e ele é utilizado para notificar o Framework que o estado interno da aplicação mudou. Como essa mudança pode impactar na interface do usuário, o Flutter reconstrói a árvore de widgets do aplicativo, atualizando ela para um novo estado. Geralmente ele é implementado dentro de funções que precisam de um gesto do usuário para serem ativadas, como acontece no onPressed, a estrutura básica de utilização é a seguinte:
O que aprendi?
Quando comecei a desenvolver meu aplicativo, fiz boa parte dele utilizando somente o setState, e ele me ajudou a aprender os seguintes tópicos:
- A definição de gerência de estado e como ela funciona.
- Por que esse assunto é tão discutido dentro do ecossistema mobile
- Como funciona a árvore de Widgets do Flutter.
Pontos positivos
Depois de utilizar o setState em produção, cheguei à esses pontos positivos:
- Fácil de usar
- Ótimo para iniciantes, tanto no Flutter, como no desenvolvimento de aplicativos e programação.
- Rápido de Implementar.
Pontos Negativos
Como nem tudo é perfeito, o setState também possui pontos negativos.
- É difícil seguir um padrão dentro de uma equipe com vários desenvolvedores.
- Você pode acabar se perdendo com as várias chamadas de setState diferentes que uma tela pode ter.
- Sendo um método da classe State, não podemos usar o setState fora dessa classe. Isso dificulta e limita as possibilidades de controlar o estado da View usando outra classe, como um Controller.
Apesar de tudo, o setState funciona bem para alguns casos, por isso, deve-se analisar sua utilização em produção e não descartar seu uso. Para quem tem medo de utilizar o setState, aconselho o vídeo no canal da Flutterando sobre o tema.
BloC com Streams
Como o Flutter e o Dart foram minhas primeiras experiências reais com programação, eu não entendia como funcionava o ecossistema de desenvolvimento e o processo de aprendizagem de uma linguagem e Framework, por conta disso demorei a entrar em contato com a comunidade, mas ao procurar alguns temas sobre Flutter no youtube, acabei encontrando a maior comunidade brasileira de Flutter chamada Flutterando. Depois de conhecer a comunidade, busquei mais conhecimento por meio dela e comecei seguir os padrões aconselhados. Naquela época, a maioria da comunidade utilizava o padrão BloC para gerência de estado, por conta das vantagens apresentadas e por que eu achava interessante aprender algo diferente, também aderi a esse padrão.
O que é.
BloC é uma sigla para Bussines Logic Component, que é um design pattern com objetivo de separar o código da regra de negócio do código da view. Mas apenas o padrão BloC não faz a gerência de estado, é preciso utilizar as Streams em conjunto. Pela documentação do Flutter, uma Stream é um caminho de dados assíncronos, em outras palavras ela provê uma forma de receber uma sequência de eventos, esse eventos remetem as interações do usuário com o aplicativo quando ela é realizada. a Stream é o caminho que os dados percorrem até notificar um Widget específico para se reconstruir. Podemos comparar com um córrego, que é o caminho que á água (os dados) percorre da nascente até o local de deságua (Widgets).
Para entender melhor como implementar o padrão BloC com uso de Streams, recomendo esse vídeo do canal da comunidade Flutterando.
O que aprendi:
- O meu primeiro grande aprendizado foi que no desenvolvimento, é completamente possível implementar algo de formas diferentes, e que cada forma tem suas vantagens e desvantagens. Comparando o padrão BloC+Streams com o setState, eu consegui fazer exatamente tudo que eu já tinha feito utilizando o setState com o padrão BloC e uma grande vantagem é que as Streams permitem que o Flutter reconstrua apenas os widgets afetados pela interação do usuário.
- Separar a regra de negócios da view também foi algo muito importante, com isso aprendi a deixar meu projeto mais organizado, manutenível e limpo. Para projetos que não são tão grandes, podemos até pensar que isso não é importante, mas a medida que ele vai crescendo, manter uma organização é essencial.
- Por último, aprendi a utilizar Streams e o StreamBuilder, um widget que permite construir um widget a partir dos dados de uma Stream. Com ele é possível fazer tratamento de erros e até utilizar ele para outros propósitos, como receber dados de um Back-End como o Firebase por exemplo.
Pontos Positivos
- Código mais escalável e manutenível.
- Ganho de performance
Pontos Negativos
- É necessário escrever muito mais código se comparado com o setState.
- O uso de Streams pode consumir muita memória ram se você não lembrar de dar dispose nas suas Streams.
- É difícil de entender para iniciantes.
MobX
Assim como o BloC, conheci o MobX por meio da comunidade Flutterando, entretanto dessa vez fui mais resistente em adotar essa nova forma de gerência de estado no meu aplicativo, uma vez que já tinha trocado a gerência de estado recentemente. Por isso, decidi apenas aprender um pouco sobre o MobX acompanhando a playlist no canal da Flutterando. Quando aprendi a realizar formulários reativos com o MobX de uma forma muito simples, percebi que ele era perfeito para o meu aplicativo, por conta dos formulários para coletar as informações sobre cada projeto. Mas o que é esse tal de MobX?
O MobX é uma gerência de estado que ficou famosa no ecossistema Javascript + React, e agora tem sido adotada pela comunidade do Flutter pela sua simplicidade, basicamente ele contém 3 elementos principais:
- Observables: São eles que vão mudar de estado quando o usuário interagir com o aplicativo.
- Actions: São responsáveis por mudar o estado dos seus Observables.
- Reactions: Monitoram os Observables e são notificados sempre que eles mudam de estado.
Para uma definição mais profunda sobre o funcionamento do MobX e como implementar sua tríade, acesse a documentação oficial em português aqui.
O que aprendi com eles
- A programação é uma área bem ágil e sempre estão surgindo metodologias novas, por isso é necessário ter a mente aberta para mudanças e a habilidade de aprender rápido.
- Como funcionam packages que necessitam usar gerador de código no Flutter.
- Para implementar o MobX no meu aplicativo, precisei aprender o padrão de projeto utilizado pela comunidade, com auxílio do Slidy e o flutter_modular.
Pontos Positivos
- Fácil de implementar e aprender.
- É necessário escrever menos código.
- Possui um padrão de aplicação.
- Documentação muito bem escrita.
Pontos Negativos
- Possui um gerador de código que facilita muito as coisas, mas acredito que pra quem nunca usou outra gerência de estado e está começando na programação, essa abstração pode dificultar o entendimento do que está por trás do código.
- Em uma aplicação muito grande, o gerador de código pode diminuir a produtividade, já que qualquer mudança em um Controller, por exemplo, necessita atualizar o código gerado.
Conclusão
Sobre as gerências de estado, acredito que nem sempre uma é melhor que as outras e não existe aquela para ser chamada de perfeita para tudo, mas é possível encontrar a que melhor se adapta ao seu projeto, por isso é bom conhecer, mesmo que de forma superficial, as diversas formas de gerir o estado da sua aplicação, para tomar a melhor decisão quando começar um projeto próprio.
Para conferir o projeto mencionado nesse artigo, acesse o link abaixo:
Sua contribuição
👏 Mostre o seu suporte apertando o botão de claps para me motivar a escrever mais e melhor.
📝 Deixe uma resposta com seu feedback, insights ou comentário sobre esse artigo.
📢 Compartilhe esse artigo com seus amigos e colegas nas redes sociais.
➕ Me siga no Medium.
💻 Conecte-se comigo no LinkedIn.
