Flutter e BLoC - Implementação básica

Publicado em 28/10/2019


BLoC é a sigla para Business Logic Object Components, um padrão muito utilizado no Flutter e que causa muita confusão em relação ao seu conceito.

Na verdade, o BLoC nada mais é do que a separação das regras de negócio da sua interface, algo recomendado em diversas tecnologias, como comento no curso Modelando Domínios Ricos por exemplo, onde implementamos a mesma coisa, mas com nome diferente em .NET.

Eu já falei algo mais conceitual sobre BLoC em um artigo aqui no blog chamado Flutter: Provider, BLoC e State Management, se está caindo de paraquedas aqui, sugiro que veja este artigo antes.

Quando utilizar

O mais importante sobre conhecer padrões é saber quando utilizá-los, e com o BLoC não é diferente. O BLoC serve para separar a regra de negócio da interface, mas o que isto quer dizer?

Vamos imaginar que estejamos construindo uma aplicação que tenha duas interfaces, uma específica para Android e outra específica para iOS.

Embora as telas sejam diferentes, a regra de negócio por trás delas é a mesma, ou seja, a forma como o usuário fará login, os cálculos a serem executados, tudo isto, será COMUM entre ambas interfaces.

Aqui entra a real necessidade do uso do BLoC, se você não tem duas interfaces distintas, se não precisa reusar suas regras em lugares diferentes, então você não precisa do BLoC.

Utilizar padrões desnecessariamente, causam o que chamamos de Overengeneering ou engenharia desnecessária, ele traz mais complexidade do que resolve problemas, ou seja, ao invés de ajudar, atrapalha.

Setup do Projeto

Para executar este projeto, vamos criar uma aplicação normalmente com Flutter, porém na estrutura de pastas, termos o seguinte:

  • lib
    • android
      • pages
      • app.dart
    • ios
      • pages
      • app.dart
    • blocs

Na pasta Android, teremos o app.dart que contém o MaterialApp seguido das páginas que ficarão na pasta pages. No iOS teremos a mesma lógica.

Na pasta blocs teremos a regra de negócio que será compartilhada entre ambas interfaces.

A primeira coisa que precisamos fazer é separar as interfaces completamente, e para isto precisamos remover o MaterialApp do main.dart e externalizá-lo, afinal, não queremos ter nada do Cupertino no Material e vice-versa.

Desta forma, nosso main.dart vai apenas chamar nosso AndroidApp ou iOSApp.

Logo temos que criar nosso MaterialApp, e para isto vamos em lib/android/app.dart e cria-lo lá.

Vamos repetir o processo para o CupertinoApp, que fica no caminho lib/ios/app.dart.

Pronto, quando nosso App iniciar em uma plataforma Android ele vai carregar o AndroidApp (Material) e quando iniciar em uma plataforma iOS vai carregar o iOSApp (Cupertino).

Separando as regras de negócio

Nosso App vai realizar uma tarefa simples, calcular o IMC, que necessita do peso e altura da pessoa.

O que NÃO QUEREMOS aqui é precisar executar o cálculo do IMC na HomePage (ainda vamos criar este arquivo) do Android e depois do iOS. Queremos reutilizar nosso cálculo em ambas telas.

Outra similaridade na tela serão os campos e resultado, afinal para executar o cálculo precisamos do peso e altura, além de uma variável para exibir o resultado do cálculo. Isto deve estar presente em ambas as telas.

O BLoC nada mais é do que uma classe que vai conter o peso, altura, resultado e uma função para calcular o IMC. Tudo que fazemos é literalmente tirar o código da UI.

Neste caso, vamos criar um arquivo em lib/blocs/imc.bloc.dart, com o seguinte código.

No BLoC, ao invés de criar apenas as variáveis do peso e altura, já estou criando os controladores, para facilitar ainda mais na interface. Lembre-se que você não está restrito a utilizar apenas recursos básicos aqui, você pode usar TextController entre outros por exemplo.

O que você deve tomar cuidado é para não depender de coisas específicas do Material por exemplo, senão o código não vai funcionar no Cupertino. De resto, sinta-se livre.

Neste exemplo, eu usei o MaskedTextController, caso queira utilizá-lo, precisa adicionar o pacote flutter_masked_text ao seu pubspec.yaml.

Utilizando o BLoC

Para utilizar o BLoC tudo que precisamos é de uma instância dele, e isto pode ser feito da seguinte forma.

Com a instância do BLoC, podemos chamar seus controles (Linha 7) em nossos TextFields.

Ou chamar nosso método calculate() (Linha 13) em qualquer botão da página.

Como resultado, o arquivo final lib/android/pages/home.page.dart fica assim.

E o arquivo lib/ios/pages/home.page.dart fica assim.

Note que as páginas ficam muito mais limpas, pois o código fica concentrado no BLoC, e além de limpas, qualquer alteração nas regras, fica centralizado, ou seja, é feito uma vez só.

As páginas ficaram semelhantes em estrutura, mas repare que nunca utilizamos Cupertino no Material ou vice-versa, ou seja, elas estão completamente isoladas.

Testes de Unidade

Outro ponto que o BLoC facilita muito são os testes de unidade. Quanto mais perto da interface, mais difícil de testar fica, e com as regras de negócio isoladas, os testes ficam bem mais simples.

Mas isto é assunto para um artigo separado que farei em breve!

Código Fonte

https://github.com/balta-io/7193



Compartilhe este artigo

André Baltieri

7x Microsoft MVP

Olá eu sou o André Baltieri, desenvolvedor Web desde 2003, já trabalhei no Brasil e nos EUA, em projetos de diversos tamanhos.

Recebi por sete vezes consecutivas, o prêmio de Most Valuable Professional da Microsoft, um reconhecimento global dado para os maiores influentes em suas tecnologias.

Atuei também como Head of People, recrutando, selecionando e direcionando a carreira de mais de 70 desenvolvedores em uma das melhores empresas para se trabalhar do Brasil.

Sou palestrante em diversos eventos como ASP.NET Conference, DevXperience, TDC, GDG dentre outros e desde 2012 realizo treinamentos e consultorias em diversas empresas do Brasil, acumulando uma ótima experiência que também transformo em cursos InCompany e Online.



Cursos Relacionados



Carreiras Relacionadas