Flutter: gerenciamento de estados com Provider

Conhecendo o projeto - Apresentação

Olá, meu nome é Leonardo Marinho, e eu sou professor de Flutter da Alura. Nesse curso, eu vim trazer um conhecimento muito legal de gerenciamento de estados. O que é isso? Para quem é esse curso? Esse curso é para você que está aprendendo Flutter, já entendeu a parte de criação de aplicativos, de acesso de API, de usabilidade do Flutter em geral, criação de telas, criação de componentes, o que são models, os modelos, a parte do set state, já entende um pouco melhor como você gerencia uma alteração dentro do seu aplicativo.

E a ideia nesse curso é avançar com gerenciamento de estados complexos. Então, se você está nesse público, vamos estudar, vamos aprender. E o que exatamente é um estado complexo? O que é um estado? O que vamos aprender dentro desse curso?

Basicamente, vamos criar um aplicativo de clientes, então, vou exibir na tela um pouco, temos um aplicativo de clientes, e a ideia desse aplicativo de clientes, é que quando apertarmos no botão de “+” na parte inferior, possamos cadastrar um novo cliente, “Ronaldo”, por exemplo, o e-mail “ronaldo@email.com”, e vamos selecionar um tipo de cliente, colocar que ele é um cliente “Titanium”, e vou mandar salvar. E a ideia é que quando eu mandar salvar, ele salve, a liste de clientes agora tem “Ronaldo”.

Se eu quiser remover esse cliente, só dar um swipe para o lado esquerdo, arrastar, e esse cliente vai sumir da lista. Também, podemos cadastrar o tipo de cliente, vou abrir o menu lateral, apertar em “Tipos de cliente”, e nele teremos os tipos listados, podemos, por exemplo, remover tipos, ou ler os tipos, adicionar um tipo, então, eu posso apertar no botão “+” em vermelho no canto da tela, e adicionar um novo tipo, um “Super client”, por exemplo, vou selecionar um ícone e apertar “Salvar”, e esse “Super client” é salvo. Se eu abrir o menu, trocar de tela, abrir o menu, voltar para a tela de clientes, o estado se manteve, o cliente se manteve.

Então, a ideia é essa. E para isso, vamos entender desde o começo o que é um inherit widget, o que o Flutter tem por padrão, o que ele já vem pronto para o gerenciamento de estados, vamos entender quais são os benefícios e malefícios de usá-lo, vamos avançar para um pacote chamado Provider. Esse pacote traz uma série de coisas legais, com base no conceito do inherit widget, só que de uma forma muito mais otimizada, muito mais simples, com menos código.

E no Provider vamos entender como gerenciar o estado dentro da árvore de widgets, como ler o estado fora da árvore de widgets, qual estrutura que precisamos ter para proteger os dados e criar uma única fonte da verdade, a famosa single source of truth, se você já estudou um pouco de gerenciamento de estado, talvez você já tenha ouvido falar nesse termo.

E vamos entender um pouco a ideia do store, vamos avançar entendendo teoricamente a parte do BloC, o que é um BloC, como o gerenciamos. Vamos também avançar teoricamente o que é um Redux, como ele funciona, prós e contras, e vamos avançar, estudar esse mundo fantástico do desenvolvimento, utilizando gerenciamento de estados.

Gerenciamento de estados é uma ferramenta superlegal para manter a estabilidade do aplicativo, você tem um controle total dos dados, de onde vêm, para onde vão, qual é o atual estado, se ele ainda está carregando, se deu erro, se deu sucesso, então, isso é uma coisa muito importante para aprendermos e gerar um aplicativo de maneira segura, estável, gerenciando bem os dados que são inseridos nele através do usuário.

Então, vamos estudar esse universo, vamos aprender muito, partindo desde o set state, que é o básico, até avançar e entender completamente o Provider, estender para o que eu falei, Redux, BloC, entender o conceito disso tudo também, e abrir esse horizonte. Então, espero você nesse curso, espero que você goste desse conteúdo, e é isso, até lá, tchau, e vamos aprender.

Conhecendo o projeto - Conhecendo o controle de clientes

Então, precisamos começar por algum lugar. Para começar esse curso, eu preparei um projeto superlegal, chamado “Alura Flutter Client Control”, temos um link no GitHub da Alura, você vai achar esse endereço nas atividades, não se preocupe. E acessando essa URL, você consegue baixar o projeto que utilizaremos no curso.

E como isso nasceu? Uma empresa chamada Alura Bank requisitou para nós um aplicativo para controlar os seus clientes, e a ideia dessa aplicativo é conseguirmos criar tipos de clientes, então, por exemplo, um cliente Platinum, um cliente Gold, igual cliente de banco, podemos criar tipos de clientes, então, poderemos definir um ícone para esses clientes, e cadastrar clientes, visualizar esses clientes, excluir, e vincular esse cliente a um tipo de cliente. Então, vamos ver isso na prática? Está muito ilustrado, muito teórico, vamos dar uma olhada nisso na prática.

Eu estou com o GitHub da Alura aberto, “alura-cursos”, e o nosso projeto “alura-flutter-client-control”. Repara que cada projeto, temos um monte de botões e várias configurações do GitHub, um monte de coisa legal, mas só duas coisas nos interessam. A primeira é na parte lateral esquerda da tela, nós temos uma caixa escrito “main”. Se nós apertarmos essa caixa, teremos algumas branches, que são as ramificações do nosso repositório no GitHub.

Nessa parte nós temos a “main”, que é a principal, por onde vamos iniciar o curso, temos a “Provider”, que é a secundária, que tem um código das aulas Provider, e tem as melhorias do final do curso.

Então, se você quiser, em algum momento do curso, parar, olhar, estudar o código, essa é a divisão do nosso repositório. Mas, importante, certifique-se que está selecionada a opção “Main”, a branch inicial do nosso curso. E agora, no lado mais direito da tela, perto do meio da tela, tem um botão da cor verde escrito “Code”. Se o seu navegador estiver em português, provavelmente vai estar escrito “Código” ou algo assim.

Vamos apertar esse botão, e nele temos uma opção na parte de baixo escrito “Download zip”, “baixar o arquivo zip”, então, apertamos essa opção, eu vou salvar no meu desktop, na minha área de trabalho o código, você pode salvar no seu computador o lugar que você melhor quiser, eu vou salvar na área de trabalho, porque fica mais fácil.

Então, vou para a minha área de trabalho, vou minimizar tudo que estiver aberto, e vou extrair esse arquivo, no meu caso também é só dar dois cliques em cima que ele extrai, mas se você estiver usando Windows, ou alguma outra coisa, é só apertar com o botão inverso do mouse em cima, e clicar em “Extrair aqui”, “Extrair como...”, e você consegue abrir o arquivo sem o menor problema.

Então, temos uma pasta com os arquivos, mas isso não quer dizer muita coisa, então, precisamos abrir o nosso Android Studio para poder acessar esses arquivos. Então, vou abrir o Android Studio, que já está configurado na minha máquina, vou deixar abrindo, e com ele vamos abrir o projeto.

Então, eu tenho uma opção “Open” na parte superior direita da janela que abriu do Android Studio, se o seu estiver em português, vai ser “Abrir”, vou selecionar minha área de trabalho e abrir a pasta do nosso projeto “alura-flutter-client-control”. Estamos abrindo.

E assim que terminar de carregar, vamos ter acesso às pastas com os arquivos, vamos poder abrir emulador e tudo mais, para rodar o código. Então, enquanto o Android Studio está carregando algumas coisas, eu vou fechar umas janelas que estão abertas, “Framework detected”. Ele está dizendo na parte de baixo sobre o “Flutter pub get”. Isso é interessante, porque são as dependências, são os arquivos extras que precisamos que o Flutter baixe, para ele funcionar. Então, eu vou apertar o “Run Flutter pub get” na parte inferior da janela.

Apertei, e vou deixar o Android Studio instalando as dependências. Na parte lateral esquerda, vou minimizar o menu inferior, já está dizendo que o processo foi instalado com sucesso, então, ele baixou todas as dependências. No menu lateral esquerdo temos algumas pastas, dentre elas a pasta “lib”, que é a pasta em que fica o código do nosso projeto do Flutter. Vou abrir essa pasta, então, basicamente temos uma pasta “components”, são os componentes, tem o menu “hamburguer”, tem o ícone picker, que é um componente que você aperta, e ele mostra uma seleção de ícones que você pode usar para escolher.

Temos a parte de models, que são os modelos, a representação em classe do que é um cliente, do que é um tipo de cliente, e seus atributos. Por exemplo, um cliente tem nome, tem e-mail, tem um tipo. Temos as páginas também, na pasta seguinte. Temos a página de tipos de cliente e a página de clientes. E temos também uma pasta chamada “estado”, que vamos ver para o que isso serve, por enquanto está vazia. E o arquivo main.dart é o start da nossa aplicação, o início de tudo, é através dele que conseguimos rodar o nosso aplicativo.

Então, agora eu vou colocar para rodar no emulador, só para vermos como ele é. Então, para isso eu vou no Android Studio e vou apertar um ícone que tem um celular com a cabeça do Android verde, e ele mostra alguns emuladores que eu já tenho preparados no meu Android Studio, eu vou executar um deles, vou minimizar o menu de seleção, e meu emulador está carregando, vou esperar só um pouco.

Vou fechar o menu lateral esquerdo para ganharmos mais espaço na tela, e vou apertar o botão de “play” na parte superior da nossa tela. Então, vou apertar, e automaticamente o Dart vai começar a rodar, o nosso Flutter, e logo veremos um aplicativo na tela do nosso emulador, e vamos ver o que ele tem de legal.

Tem bastante coisa legal, e vamos realmente entender esse projeto, entender o que vamos usar no curso, porque é importante conhecermos, é importante entendermos com o que estamos trabalhando, com o que estamos mexendo, e principalmente ficar mais confortável com a interface gráfica, ver o que funciona e estudar o que está acontecendo.

Então, vamos esperar, ele está dando alguns warnings, são apenas avisos, por questão de versão de Android, você pode ignorar, isso não são erros, não vão de maneira nenhuma impactar contra o nosso código. Pode ser que para você nem apareça isso, porque depende da versão do emulador, depende de como está configurado o seu computador.

Executou, temos o nosso cliente na tela. Repara que já tem uma lista geral do Paulo, Caio, Ruan, tem alguns clientes cadastrados, vamos abrir o menu superior do nosso aplicativo, na parte esquerda superior do emulador, podemos ir em “Tipos de clientes”, e nela nós temos uma lista com “Platinum”, “Golden”, “Titanium” e “Diamond”. Então, são os tipos de clientes que temos.

Temos o botão “+” na parte inferior e um tom de vermelho alaranjado, que é para adicionar um novo tipo de cliente. Então, nós temos um nome e temos para cadastrar um tipo de cliente. Vamos voltar no menu “hamburguer”, temos “Gerenciar cliente” novamente, temos um botão de “+”, então, no botão “+”, na parte inferior novamente, um botão mais azul, temos uma caixa com nome, e-mail e com alguns tipos de clientes para cadastrar.

O que nós precisamos daqui para frente no curso é entender o que funciona, o que não funciona no aplicativo como deveria, por que funciona e por que não funciona, o principal por que não funciona, para podermos entender como é o gerenciamento de estado, o que é um estado, qual ferramenta podemos usar para aprimorar esse estado, então, vamos trabalhar em cima de tudo isso, vai ser uma jornada bem legal, bem gratificante, e eu acredito que você também vai curtir, assim como eu curto estudar e ensinar, aprendemos muito quando ensinamos, então te recomendo também.

Tudo que você aprender nesse curso, ensine alguém, isso é importante, você ajudar outra pessoa e você vai treinar o seu conhecimento e isso é fantástico. É ensinando que aprendemos muito mais. Então, é isso, e daqui para frente precisamos entender o que funciona no nosso aplicativo, e o que não funciona, e por quê. E para isso, vamos explorar todas as páginas, pastas, arquivos, vamos ler os códigos, adaptar, mexer, entender o que precisamos alterar. É isso, e te espero no próximo vídeo, tchau.

Conhecendo o projeto - Gerenciando estados

Anteriormente, nós baixamos o nosso aplicativo de controle de clientes em Flutter, e rodamos ele no Android Studio. Então, chegamos na tela de clientes do emulador, a primeira tela do aplicativo.

Nessa tela, temos uma lista de clientes, aparentemente, e um tipo entre parênteses para cada cliente. Também temos o botão de adicionar, na parte inferior direita, e temos um menu “hamburguer” na parte superior esquerda da tela do simulador Android.

Vimos a primeira tela, vamos no menu, dei uma olhada, então temos o “Gerenciar clientes”, temos “Tipos de clientes”, saio do aplicativo. Vamos abrir a tela de tipos de clientes, para dar uma olhada no que temos.

Então, nós temos o tipo Platinum, o Golden, o Titanium e o Diamond. Mas será que esse aplicativo está funcionando? Será que conseguimos cadastrar um novo tipo, será que conseguimos cadastrar um novo cliente usando o tipo que cadastramos? Esse é o X da questão. Então, precisamos testar o aplicativo, analisar o código, ver se tem algo para resolvermos, melhorar, aprimorar, e em cima disso vamos começar a trabalhar com o controle do estado e entender o que é um estado, como manipulamos isso, se é de comer, de beber, o que podemos fazer com ele.

Então, no “Tipos de clientes”, eu vou aproveitar que estão nessa tela, e vou apertar o botão “+”. Então, abri, e ele nos dá uma janela modal, basicamente informando o “Cadastrar tipo”, dando a opção de cadastrar um nome, selecionar um ícone, salvar e cancelar. Então, vou cadastrar um tipo “Super cliente”. E vou abrir o “Selecione um ícone”, e vou colocar o segundo ícone da lista, e ele não reconheceu, porque eu selecionei um ícone. Então, já temos um bug para nos atentarmos.

E vou salvar. Salvei, mas não aconteceu absolutamente nada. Então, vamos entender o que está realmente acontecendo e por quê? Vamos dar uma olhada no código. Nós temos a pasta “Pages” na árvore do projeto do Flutter, na parte esquerda do Android Studio, tem várias pastas, podemos abrir a pasta de pages, nossas páginas.

E eu vou primeiro na página dos tipos de clientes, então clients_types_page.dart. Abri, vou fechar o menu lateral esquerdo para ganharmos mais espaço para olhar, e já vi um problema, tem um setState comentado. Então, vamos começar a procurar esse tipo de coisa.

Estou rolando o código, temos a lista dos tipos já pré-cadastrados que estão aparecendo na tela, temos um setState comentado, vamos descendo mais um pouco, tem outro setState comentado, temos outro comentado. O que isso quer dizer? Quer dizer que quando o Flutter recebe um comando de salvar ou de cadastrar, que estamos fazendo, ele não está atualizando o estado. O nosso aplicativo não está avisando ao Flutter que ele precisa atualizar a tela, que ele precisa renderizar novamente, gerar graficamente novamente os widgets, de maneira que conseguirmos ver a alteração que fizemos.

Então, vamos descomentar esses setState. Então, o setState do remove, agora podemos remover um item da lista. Vamos pesquisar por setState, ele é case-sensitive, tem que digitar o maiúsculo corretamente. Então, vou descomentar o setState da linha 95, tem um outro setState na 115. Dei um “Command + S” porque estou no Mac, mas se não for Mac é “Ctrl + S”.

E o “Super” acabou de aparecer na tela do aplicativo. Então, isso quer dizer que quando cadastramos o “Super”, ele entrou na lista de tipos de clientes, ele foi adicionado na lista de cima do código. Só que como o Flutter não recebeu o aviso de que ele deveria atualizar os widgets, atualizar o estado da tela, a lista recebeu um novo valor e nada foi feito. Então, por exemplo, se eu tentar criar um novo tipo, “Super mega blaster”, que faz Alura, vou selecionar um ícone, vou colocar um coração, e já entrou o coração.

Então, o setState está atualizando o estado da aplicação de maneira que o ícone está aparecendo. Mas o ícone está funcionando e está sendo selecionado. Então, salvei, e o nosso “Super mega blaster” está nos tipos de clientes. E agora, vamos gerenciar clientes. Gerenciar clientes também, provavelmente está do mesmo jeito.

Vou cadastrar um “Leonardo”, e no e-mail vou colocar “leonardo@alura.com”, e colocar “Platinum”. Não apareceu o que cadastramos, depois temos que entender o porquê. Selecionei o “Diamond”, ele continuou no “Platinum”, mesma coisa, salvei, não fez nada. Então, provavelmente é isso também, vamos olhar?

Vou abrir o menu lateral, vou na clientes_page.dart, dentro da pasta “pages”, fechar o menu lateral para ganharmos espaço, e vou fazer a mesma coisa, vou pesquisar, “Ctrl + F” ou “Command + F”, e setState. Também está comentado, um setState dentro da função de remover. E descomentamos o setState do remover, mas eu não mostrei funcionando. O Leonardo Diamond entrou, o remover é empurrar para o lado esquerdo e ele limpa da lista. Como já remover agora, acabamos de tirar o comentário do setState, conseguimos ver o resultado desse remover funcionando. Vamos olhar outros setState?

E por que isso está comentado? Simples, eu fiz de propósito para você ver a importância disso. Porque se eu já entregasse o código para você com isso funcionando, você não ia entender, ou talvez até entenderia, não sei se você está vindo de uma linha que já trabalha com Flutter, mas por didática eu preferi deixar assim, para tomar um susto de que não está funcionado e para olharmos isso.

Então, vamos descomentar o setState que adiciona o cliente na lista, é importante, senão não vamos ter nenhum cliente na lista. Ele já avisou que rodou, agora eu vou cadastrar novamente, o nome ”Leonardo”, o e-mail é “leonardo@alura.com.br”, agora selecionou “Titanium”, “Diamond”, está mudando. Salvei.

É isso, então agora, o estado está sendo atualizado, demos o primeiro passo, entender o porquê do estado não ser atualizado na tela. Por mais que estivéssemos recebendo os valores, o estado não estava sendo realmente atualizado.

Agora, precisamos avançar e entender melhor por que no “Adicionar cliente” não conseguimos enxergar alteração no tipo de cliente, por que se voltarmos no tipo de cliente, o nosso cliente que cadastramos desapareceu, o tipo de cliente, onde está o “Super mega blaster” com tudo que acabamos de cadastrar? Sumiu. Você troca de tela, quando volta, ele some.

[08:19] Então, tem umas coisas estranhar acontecendo no estado, que precisamos investigar, e vamos fazer isso agora. Vamos investigar, vamos ver como isso funcionar, e vamos trabalhar que tem muito conteúdo legal, tem muita coisa legal para fazermos. Então, até logo.

Sobre o curso Flutter: gerenciamento de estados com Provider

O curso Flutter: gerenciamento de estados com Provider possui 120 minutos de vídeos, em um total de 35 atividades. Gostou? Conheça nossos outros cursos de Flutter em Mobile, ou leia nossos artigos de Mobile.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Introdução
• Gerenciamento de estado
• Consumindo dados
• Aprimorando o conhecimento