O conceito de gerenciamento de estado continua sendo um dos tópicos mais críticos no Flutter. Isso ocorre porque tudo o que fazemos no Flutter, desde operações relacionadas ao recebimento de informações de um usuário até a exibição de um dado, lida com o estado. Portanto, gerenciar esses dados da melhor maneira possível garante que o aplicativo tenha uma codificação limpa, abstração adequada, opere sem problemas e forneça os melhores resultados possíveis.
Muitas soluções de gerenciamento de estado foram desenvolvidas ao longo dos anos, cada uma baseada no mesmo conceito de manipulação ou modificando o estado da maneira mais limpa e facilmente acessível possível. Neste artigo, iremos construir um aplicativo de amostra com um dos melhores pacotes de gerenciamento de estado para Flutter: Provider.
Antes de começarmos, observe que este artigo pressupõe que você tenha um ambiente de desenvolvimento de Flutter operacional em sua máquina , junto com o conhecimento prático do Flutter.
Vamos falar sobre o que significa gerenciar o estado em um aplicativo Flutter.
Qual é o estado no Flutter?
O “estado” no Flutter se refere aos dados armazenados dentro de um widget que podem ser modificados dependendo da operação atual. O estado de um aplicativo pode ser atualizado ou completamente alterado no início de um aplicativo ou quando uma página é recarregada.
Isso significa que tudo o que os widgets fazem exige o manuseio dos dados recuperados do usuário e sua transmissão para execute uma ou mais operações. Flutter também pode usar o estado para exibir informações ao usuário.
O que é Provider?
O pacote Provider , criado por Remi Rousselet visa lidar com o estado da forma mais limpa possível. No Provider, os widgets ouvem as mudanças no estado e atualizam assim que são notificados.
Portanto, em vez de reconstruir toda a árvore de widgets quando há uma mudança de estado, apenas o widget afetado é alterado, portanto reduzindo a quantidade de trabalho e fazendo o aplicativo funcionar mais rápido e sem problemas.
Gerenciamento de estado com Provider
Lembre-se do que discutimos sobre Provider anteriormente: que os widgets ouvem as mudanças e notificam uns aos outros se houver uma reconstrução. Assim que o estado muda, esse widget específico é reconstruído sem afetar outros widgets na árvore.
Três componentes principais tornam tudo isso possível: a classe ChangeNotifier no Flutter, o ChangeNotifierProvider (usado principalmente em nosso aplicativo de amostra) e os widgets do consumidor.
Qualquer mudança no estado observada na classe ChangeNotifier faz com que o widget de escuta seja reconstruído. O pacote Provider oferece diferentes tipos de provedores-listados abaixo estão alguns deles:
A classe Provider pega um valor e o expõe, independentemente do tipo de valor ListenableProvider é o provedor específico usado para objetos ouvintes. Ele ouvirá e, em seguida, solicitará aos widgets que dependem dele e são afetados pela mudança de estado para reconstruir sempre que o ouvinte é chamado ChangeNotifierProvider é semelhante a ListenableProvider, mas para objetos ChangeNotifier, e chama ChangeNotifier.dispose automaticamente quando necessário ValueListenableProvider escuta um ValueListenableProvider e expõe o value StreamProvider escuta um stream, expõe o último valor emitido e pede aos widgets dependentes do stream para reconstruir FutureProvider pega uma classe Future e atualiza os widgets dependendo dela quando o futuro estiver concluído
Getting started
Comece criando um novo projeto e adicione esta linha ao bloco de dependências em seu arquivo pubspec.yaml:
dependencies: provider: ^ 5.0.0
Execute o comando pub get para obter uma cópia local do pacote:
flutter pub get
Em seguida, precisamos criar um novo aplicativo de Material no arquivo main.dart:
import’package: flutter/material.dart’; void main ()=> runApp (MyApp ()); class MyApp extends StatelessWidget {@override Widget build (BuildContext context) {return MaterialApp (title:’Material App’, home: Scaffold (appBar: AppBar (title: Text (‘Material App Bar’),), body: Center (child: Container (child: Text (‘Hello World’),),),),); }}
Gerenciando dados de estado
Agora, crie uma nova classe que contenha os dados de estado necessários para o aplicativo. Vamos chamá-lo de UserDetailsProvider. A classe UserDetailsProvider irá declarar todos os métodos que lidam com o tratamento do estado aqui.
Esta classe estende a classe ChangeNotifier; ChangeNotifier nos fornece acesso ao método NoticeListeners, que usaremos para notificar widgets de escuta para reconstruir quando o estado mudar.
Declaramos dois controladores para nosso TextFormField: name e age. O método para atualizar o nome e a idade do usuário com base na entrada do usuário também é declarado nesta classe.
Tudo que lida com o estado do aplicativo é declarado aqui:
class UserDetailsProvider extends ChangeNotifier { TextEditingController nameController=TextEditingController (); TextEditingController ageController=TextEditingController (); int _age=0; String _userName=”; int get userAge=> _age; String get userName=> _userName; void updateAge (int age) {_age=age; notificarListeners (); } void updateName (String name) {_userName=name; notificarListeners (); }}
Atualizando o estado
Depois que o nome é atualizado, chamamos o método NoticeListeners, que informa os widgets de escuta sobre uma mudança no estado e, portanto, dispara uma reconstrução de todos os widgets relevantes.
Agora que temos a classe UserDetailsProvider (que lida com o estado), precisamos vincular a classe à tela usando ChangeNotifierProvider. Agora, envolva todo o aplicativo com um ChangeNotifierProvider no método runApp do bloco principal.
O ChangeNotifierProvider expõe duas propriedades importantes: criar e filho. A classe que declaramos, que estende ChangeNotifier, é passada para a propriedade create, vinculando a classe à tela:
import’package: flutter/material.dart’; import’package: provider/provider.dart’; void main ()=> runApp (ChangeNotifierProvider
Agora, o aplicativo está vinculado à classe que fornece o estado; sempre que houver uma mudança no estado, ele provoca uma reconstrução das telas no aplicativo.
Coletando dados do usuário
Atualmente, o widget HomeScreen contém um formulário com dois TextFormFields para receber o nome e idade do usuário. Além disso, um RawMaterialButton é incluído para salvar as alterações após o usuário passar os detalhes necessários.
Após este conjunto de widgets, temos dois widgets de texto que exibem os valores fornecidos pelo usuário. Esses dois widgets são os únicos widgets que precisam ser atualizados sempre que houver uma mudança no estado do aplicativo.
Isso significa que não precisamos reconstruir todas as telas sempre que houver uma mudança no estado. Portanto, precisamos reconstruir seletivamente apenas os widgets de texto relacionados à mudança de estado. Para isso, temos o widget Consumidor.
Atualizando seletivamente o estado
O widget Consumidor permite que apenas os widgets filhos sejam reconstruídos sem afetar outros widgets na árvore de widgets. Conforme declarado anteriormente, queremos que apenas os widgets de texto exibam os detalhes fornecidos pelo usuário para atualizar.
Conseguimos isso envolvendo os dois widgets de Texto com uma coluna e retornando-a na função de construtor exposta pelo consumidor widget:
Consumidor
Agora, apenas os widgets de texto serão atualizados sempre que o estado for alterado no aplicativo.
Certifique-se de usar os provedores no nível mais baixo possível; você pode usar os provedores apenas com os widgets afetados. Usá-lo em um alto nível fará com que os widgets não preocupados com a mudança de estado sejam reconstruídos. A mesma coisa com o widget do Consumidor; certifique-se de consumir no nível específico para evitar a reconstrução de toda a árvore de widgets.
Nosso aplicativo de amostra está finalmente pronto!
Conclusão
Ênfase na importância de o gerenciamento de estado no Flutter não pode ser exagerado. Hoje, dissecamos o pacote Provider e o usamos para gerenciar o estado de um aplicativo Flutter de amostra. Esperançosamente, com o conhecimento prático que você adquiriu ao construir um aplicativo junto com este artigo, agora você pode gerenciar corretamente o estado do seu aplicativo de uma maneira limpa e mais acessível.
