Gerenciamento de estado — Introdução
Gerenciamento de estado é um tema bastante abordado na comunidade e de certa forma despercebido quando se começa a estudar o mesmo. Neste artigo irei falar deste tópico e tentar explicar da melhor forma o que é, como funciona, especialmente em Flutter, e como implementar; e a pergunta que sempre é feita “ onde e quando implementar?” será respondida.
Este artigo faz parte de uma série de 5 artigos que vão abordar vários padrões de gerenciamento de estado.
- State Management — Introdução (este artigo)
- State Management — Provider
- State Management — Bloc
- State Management — Redux
- State Management — Mobx
State Management
TL;DR Gerenciamento de estado refere-se ao gerenciamento do estado de um ou mais controles da interface do usuário, como campos de texto, botões OK, botões de opção etc. em uma interface gráfica do usuário.
Simplificando, para Flutter pode-se observar a gerenciamento de estado da widget tree.
Ephemeral vs App State
Para falar de gerenciamento de estados, é importante saber que estes podem ser classificados em dois tipos, os ephemeral e app state.
App State, como o nome deve sugerir suporta mudanças que afectam vários níveis da widget tree e até da aplicação, pois, pode guardar informações durante o uso de uma aplicação e entre sessões do usuário, portanto, não é suficiente apenas o uso de StatefulWidget para poder gerir. Para gerir o estado neste caso é necessário recorrer a opções como as citadas no início do artigo, como Redux, Provider, etc.
Um exemplo claro do app state pode ser o uso de um carinho de compras que deixa-te rodar entre várias páginas sem perder a informação lá contida, e para o caso de sessões do usuário podemos ter as informações guardadas em nosso Shared Preferences.
Ephemeral state por sua vez é para acções menos complexas, que nos bastam guardar sua informação em um widget por si só, e são suportadas pelo StatefulWidget com técnicas como definir um _index ( “_” é convenção do flutter[dart] para variável privada) para verificar o estado, setState() para definir o estado. Isso significa, no entanto, que não nos importamos se ao navegarmos para outra página e de volta nós tenhamos a nossa variável reiniciada.
No caso teríamos exemplos como mudar a cor de um elemento ou no caso das compras a classificação de um produto que é apenas apresentada na tela específica.
Olhando para a figura a cima é possível perceber uma certa lógica para decidir se nós precisamos usar o ephemeral ou o app state, o que significa que não existe um cenário específico para usar variáveis como _index por exemplo apenas para ephemeral state, podendo se for por lógica da aplicação definir a cor de um elemento como preferencial então este passa a ser app state, contudo, há que combinar com técnicas que permitam manter este dado disponível onde for necessário como foi explicado antes.
setstate() — o mito por detrás
De entre vários elementos e métodos usados quando se faz uma aplicação em Flutter o setState() tende a ser um dos que mais confusão faz entre os desenvolvedores, trazendo a vida perguntas como “quando devo usar?”, “há limite para usar?”, “onde devo implementar?” entre outras, mas estas são as mais comuns e de certa forma pertinentes (pode deixar ficar mais algumas nos comentários).
Indo directo ao pontos, setState() é um método que pode ser instanciado tanto pelo framework em si bem como através do desenvolvedor (como gostamos de referir “programmatically”) para definir o estado interno de um elemento, ou seja, reconstruir este mesmo elemento. O que se deve reter deste excerto é que este método apenas influi no elemento ao que mesmo está directamente vinculado na widget tree, portanto, pode ser usado onde e quando for necessário e inúmeras vezes, se necessário; respeitando, claro, sempre as regras básicas de lógica de programação, convenções e organização de código.
Navegação e rotas
Visto que falou-se aqui de mudança de estado entre elementos da widget tree, é importante perceber também como fazer chegar essa informação para diversos elementos e manter ela presente em qualquer instante e localização (na aplicação — widget tree). Para tal recorremos a navegação que possui dois métodos principais que contam com variações dependendo de como se pretende aplicar os mesmos, que são o Navigation.push() para navegar a uma nova página e p Navigation.pop() que serve para retornar a página anterior. As navegações por sua vez são gerenciadas pelo MaterialPageRoute que é responsável por pegar o contexto, o destino e a acção a tomar como passar para a nova página com valor x como argumento (caso esteja definido).
Extração TLDR:
Espero que tenha aprendido com este artigo e que se tenha divertido enquanto lia.
Obrigado por acompanhar até ao fim e espero por você nos próximos artigos.
Para questões e sugestões esteja a vontade para tal nos comentários, email igorlsambo1999@gmail.com ou twitter @lsambo02.
Obrigado e até ao próximo artigo!!!
