Gerenciamento de Estado de forma simples com Cubit

https://github.com/GabrieleSacramento

Quando uma pessoa no início da carreira pensa em Gerenciamento de Estado, o frio na barriga e as perguntas surgem: como funciona? O que usar? Por onde começar?

Bom, hoje no mercado tecnológico temos alguns gerenciamentos de estados populares entre a comunidade de desenvolvimento, entre eles o Mobx, o Getx e o Bloc.

Além das famosas formas de gerenciamento de estado, o flutter oferece algumas classes como ValueNotifier e StatefulWidget que podem nos ajudar a controlar os estados em nosso código sem o uso de pacotes externos que auxiliam no controle da aplicação.

Neste artigo vamos discutir um pouco sobre uma das principais tecnologias utilizadas na hora de controlar o estado de aplicações, o Bloc!

Mas porque o Bloc? Como usá-lo? Quais são as vantagens?

O Bloc é um gerenciamento de estado muito poderoso e nos oferece formas mais simples e eficientes de transmitir informações para a tela do usuário final.

Abaixo, listei algumas vantagens de se utilizar o Bloc:

• Possibilidade de criação de um código mais estruturado;
• Entendimento claro de todos os estados do APP;
• Fácil de manter e testar;
• Boa divisão das responsabilidades do APP.

Uma das maiores vantagens de usar o Bloc é saber a sequência de mudanças de estado e como essas mudanças foram desencadeadas. Quando falamos de um estado que pode ser crítico à funcionalidade da aplicação, pode ser muito benéfico utilizar uma abordagem como o bloc, orientada à captura de todos os eventos, além das mudanças de estado.

Mas o objetivo deste artigo não é o foco em Bloc e sim em uma ferramenta poderosa que surgiu com o propósito de facilitar ainda mais o gerenciamento de estado que é o Cubit.

Bloc X Cubit | Quais as diferenças e vantagens de se utilizar o Cubit?

Abaixo, listei algumas vantagens de se utilizar o Cubit:

• Mais simples e menos verboso;
• Adequado para lógicas de estados menos complexas;
• Fácil de entender e implementar;
• Separa a lógica da UI.

Para compreender melhor em que momentos devemos usá-los é necessário entender que o Cubit é uma pequena versão do Bloc e que seu funcionamento se dá a partir de funções que se comunicam com a tela (UI) e a camada de dados, emitindo na tela diferentes estados.

No Cubit, diferente do Bloc, não há interação diretamente com a estrutura de eventos e streams, ele utiliza o método de criar funções que se comunicam tanto com a UI, quanto com a camada de dados, enquanto os estados funcionam de forma semelhante aos streams, fazendo o transporte informações entre a tela e o Cubit. O resultado final será o mesmo, mas os esforços ao construir uma aplicação com Bloc ou com Cubit nos fazem pensar sobre qual gerenciamento queremos utilizar.

Mas como eu consigo usar o Cubit na minha aplicação? Vá até o pubsbec.yaml e insira a última versão do pacote flutter_bloc. Para esses exemplos utilizei a versão flutter_bloc: ^8.1.3 , mas você pode encontrar a forma mais atualizada na documentação do pub.dev.

Agora você já pode usar o Cubit no seu código!!

Exemplo de como utilizar o Cubit.

Exemplo de como utilizar o State.

O Cubit também oferece widgets que auxiliam na construção dos estados na tela, vamos falar um pouco sobre alguns deles:

BlocProvider

O BlocProvider é o widget que cria e fornece uma instância do Cubit para todos os seus filhos, mas é importante entender que ele irá prover uma única instância do Cubit na árvore de widgets abaixo.

Quando o BlocProvider é declarado no topo da árvore de widgets, todos os widgets terão acesso a essa instância do Cubit, mas quando declarado em outro local, como no meio da árvore por exemplo, apenas os widgets abaixo terão acesso a essa instância.

Também é possível criar mais de uma instância de BlocProvider para repassá-los pela árvore de widgets, e para isso utilizamos o MultiBlocProvider.

Exemplo de como utilizar o BlocProvider.

Exemplo de como utilizar o MuiltBlocProvider

BlocBuilder

O BlocBuilder é o widget responsável pela construção dos widgets na tela, para funcionar de forma correta ele precisa receber uma instância do Cubit desejado e uma função construtora que será responsável por construir os widgets de acordo com o estado que o Cubit irá fornecer.

Exemplo de como utilizar o BlocBuilder.

BlocListener

O BlocListener é o widget responsável por escutar as mudanças de estado e realizar uma ação, ao contrário do BlocBuilder, ele não irá construir algo a todo momento, ele é chamado sempre que houver alguma mudança de estado.

O BlocListener pode ser utilizado quando desejamos realizar navegação entre telas, quando desejamos exibir erros que são exibidos para o usuário e removidos da tela, entre outros.

Exemplo de como utilizar o BlocListener.

Dois bons exemplos de utilização do BlocListener são o SnackBar e o Bottom Sheet.

Também é possível criar uma instância de mais um BlocListener em um mesmo arquivo e para isso utilizamos o MultiBlocListener.

Exemplo de como utilizar o MultiBlocListener.

BlocConsumer

O BlocConsumer é um widget importante para a organização do código pois dentro dele possui um Listener e o Builder que cumprem as mesmas funções do BlocListener e do BlocBuilder, sendo assim, quando na tela é necessária a utilização de ambos, é possível utilizar o BlocConsumer, deixando o código mais limpo, organizado e facilitando sua visualização.

Exemplo de como utilizar o BlocConsumer.

É isso galera! O Cubit é uma forma de gerenciamento de estado muito poderosa, mas não tão comum quanto as outras, logo os conteúdos disponíveis na internet são mais escassos, então queria trazer aqui para que mais pessoas tivessem acesso a como o Cubit funciona e quem sabe, integrá-lo em alguma aplicação.