Flutter: aplicando BLoC com Cubit

Explorando o projeto e o BLoC - Apresentação

Olá! Meu nome é Matheus Alberto e serei seu instrutor neste curso de Flutter: B.L.O.C!

Matheus é um homem branco, possui cabelo castanho escuro curto e liso, e sombrancelhas grossas. Está sentado em uma cadeira preta acolchoada e usa fones de ouvido com fio. Ao fundo, uma parede azul.

Neste curso, seremos apresentados ao B.L.O.C com Cubit. Nosso projeto consiste na bilheteria Panucci, um aplicativo de compra de ingressos online.

A primeira funcionalidade que vamos implementar é a de carregar as informações de uma API e mostrá-las em nossa home page. Em seguida, teremos a opção de filtrar a lista de filmes baseado no gênero do filme que queremos assistir, como suspense, ação, comédia, entre outros. Usaremos o B.L.O.C para fazer isso.

Ao clicar em um filme, todo o tema da aplicação deve ser alterado. Ao se tratar de um filme de suspense, por exemplo, o tema passará a ser escuro.

No decorrer deste curso, passaremos pelos seguintes aprendizados:

• entender o que é BloC e Cubit e quais as principais diferenças entre eles;
• implementar padrão com BloC;
• entender as camadas do projeto e como o BloC vai implementar uma nova camada para a aplicação;
• fazer injeção de dependências com BloC Provider.

Para um bom aproveitamento do curso, é importante que você tenha conhecimentos básicos de Flutter e já tenha trabalhado com algum tipo de gerenciador de estados, como o Provider.

Vamos nessa?

Explorando o projeto e o BLoC - Apresentando o projeto

Vamos conhecer um pouco do projeto que desenvolveremos: a bilheteria Panucci, que se trata de um aplicativo de compra de ingressos de filmes online.

Esse projeto já começou a ser implementado por outra equipe de desenvolvimento, então nossa função será desenvolver outras futures. Vamos conhecer o que foi feito até o momento!

Estrutura de arquivos

A primeira pasta que temos é "components", na qual estão todos os componentes utilizados na aplicação, como cartões, ícones, textos, botões, entre outros.

Alguns desses componentes estão separados por pastas. Em "checkout" temos uma lista de componentes que serão utilizados na página de mesmo nome; em "home", os componentes da página home, e assim por diante. Os componentes genéricos que serão utilizados em várias outras páginas estão na raiz "components".

A pasta "models" possui a representação do que é um filme e quais informações um filme deve ter. Abrindo o arquivo "movie.dart", temos acesso à classe Movie, onde consta as informações de nome, classificação, duração, sinopse, gênero, imagem e sessões disponíveis para o filme.

Na pasta "screens" estão as nossas telas da aplicação, que são 3: home, checkout e movie screen. Para termos uma noção, "home.dart" se trata da tela inicial, assim que a aplicação é aberta. Clicando em algum filme, temos acesso à página implementada em "movie_screen.dart", onde vemos as informações do filme escolhido. Ao clicar em uma sessão do filme, somos direcionados à página de checkout, onde podemos comprar o ingresso para o filme e sessão selecionados.

Na penúltima pasta, "services", temos o arquivo "movies_api.dart", onde acessamos a API de filmes, ou seja, a listagem de filmes que vamos carregar e mostrar para a pessoa usuária dentro da aplicação. Além disso, há também os métodos que serão usados para chamar e carregar as informações da API.

Por fim, na pasta "themes", temos o arquivo "my_themes.dart", onde constam dois dicionários com as informações de cores para os diferentes gêneros de filme. Ou seja, para cada gênero, temos o retorno de um tema construído a partir das cores selecionadas.

Agora, podemos pensar nas futures de devemos implementar.

Futures

Uma das nossas tarefas é preencher a tela de home com os dados da API utilizando gerenciadores de estado. Além disso, faremos um filtro baseado no gênero do filme.

No topo da aplicação, temos um menu drop-down para selecionar os diferentes gêneros do filme. Dessa forma, a ideia é que apareçam somente os filmes do gênero selecionado a partir deste menu.

Na última tarefa, ao clicar em um filme, o tema e a coloração da aplicação devem mudar de acordo com o gênero do filme selecionado. No caso de um filme de suspense, por exemplo, o tema da aplicação deve ser escuro, com cores vermelhas.

Vale ressaltar que as cores e temas já foram pré-definidos no arquivo "my_themes.dart", então nosso trabalho é apenas implementar a future responsável por mudar a cor da aplicação.

No total, temos 3 futures para implementar. A seguir, começaremos a desenvolver a future de carregar os filmes da API e mostrá-los em nossa home!

Explorando o projeto e o BLoC - Lógica e o padrão BLoC

Vamos iniciar nossa future de carregar informações da API e mostrá-las em nossa home page.

Até então, temos informações fixas na home. Na linha 43 do arquivo "home.dart", estamos preenchendo as informações necessárias para o MovieCard existir e criando um objeto movie manualmente:

return MovieCard(movie: Movie(name: "James Bond", classification: Classification.naoRecomendado12, duration: "1h 22min", sinopse: "James Bond é um agente", genre: "Suspense", imageURI: null, sessions: ["18:00"]));
                },

Note que as informações do filme também foram criadas manualmente, mas o ideal é que as carreguemos de outro local.

Para fazer a atualização de estado da tela depois de carregar as informações, usaremos a ferramenta BloC que, além de ser um gerenciador de estado, também é um padrão de projeto.

O desafio: vamos conhecer a tela do projeto

Primeiro, precisamos conhecer a tela home, que deve ser preenchida com informações vindas da API.

Sendo assim, faremos uma requisição à API e preencheremos as informações na home.

Os estados da tela home

O primeiro estado da home é quando as informações da API estãos carregando. Portanto, precisamos dar um feedback à pessoa usuária informando que os filmes estão sendo carregados.

Outro estado importante é quando os filmes já estão carregados e aparecem listados na tela.

Um terceiro estado representa erro no carregamento, que se dá quando há um problema na comunicação com a API. Portanto, a pessoa usuária também precisa ser alertada sobre esta falha.

Por enquanto, temos 3 estados.

Onde vai ficar a lógica?

Para fazer a requisição, precisamos de um future builder, onde deve constar a lógica responsável por chamar a API com as informações, construir um objeto com a lista de filmes e preenchê-la com os movies cards.

No projeto, as responsabilidades estão separadas em pastas: "components", "models", "screens", "services" e "themes". Podemos chamar essas pastas de camadas e cada uma terá uma responsabilidade.

A pasta "services", por exemplo, fará a requisição da API; "themes" cuidará da estilização da aplicação; "models" contém os modelos que representam alguma informação; "components" refere-se aos componentes; e "screens" armazena as nossas telas, onde ficarão as informações carregadas e renderizadas para a pessoa usuária.

A lógica do future builder, responsável por transformar as informações em uma lista e iterar sobre os itens, poderia ficar na tela home. Porém, considerando a separação de camadas do projeto, será que faz sentido armazenar a lógica dentro de um arquivo responsável por simplesmente mostrar a informação?

Pensando nisso, temos o BloC, que nos apresenta outra camada, a de lógica, onde toda a funcionalidade de pegar as informações e tratá-las, fica separada dentro de outro arquivo.

Veremos essa estrutura mais adiante, porque, agora, vamos instalar o BloC.

No arquivo "pubspec.yaml", na raiz total do projeto, temos as linhas 38 e 39 que adicionam duas linhas na dependência do flutter: o bloc e o flutter_bloc.

bloc: ^8.1.1
flutter_bloc: ^8.1.2

O instrutor já deixou as duas dependências instaladas no projeto. Mas, caso você queira fazer por conta própria ou implementar em outro projeto, é importante adicioná-las nas dependências.

Para este curso, é muito importante utilizar a mesma versão adotada pelo instrutor, assim temos consistência no desenvolvimento do projeto. São elas: o BloC na versão 8.1.1 e o Flutter BloC na versão 8.1.2.

Instaladas as dependências, podemos usar o BloC na aplicação!

Sobre o curso Flutter: aplicando BLoC com Cubit

O curso Flutter: aplicando BLoC com Cubit possui 97 minutos de vídeos, em um total de 37 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:

• Explorando o projeto e o BLoC
• O Cubit e a tela Home
• Filtro com Cubit
• BLoC Provider