Covid19 API com Flutter, Mobx e Modular (parte 2)

Vamos finalizar a aplicação codificando o controlador e a UI.

(Se você não leu a parte 1, está aqui.)

Image for post
Image for post

Antes, vamos instalar um complemento no VSC para ganhar produtividade. Trata-se do flutter_mobx.

Além de snnipets para criar classes, ele possui uma ferramenta que executa o comando: flutter pub run build_runner para geração de classes do Mobx.

Image for post
Image for post

Separando a lógica

Na pasta pages vamos criar o arquivo home_controller.dart.

Com a extensão acima instalada, podemos digitar mobx e enter para que seja criado uma classe MobxX Store.

Codificaremos assim:

Comentando o código

Devemos recuperar a classe que faz as chamadas a api. Utilizamos o modular em Modular.get<CovidApiRepository>.

No construtor vamos invocar dois métodos que serão implementados em seguida, getInfoMundo() e getInfoPais()

Declaramos quatro objetos. Os que representam os nossos modelos (parte1) mundo e o país, um para controlar o visão na aba (currentIndex) além de um textFieldController para realizarmos a consulta.

Todos estão com a anotação @observable indicando que queremos ser notificados do seu estado.

A IDE apresentará alguns erros até esse momento, pois ainda não estamos fazendo uso das bibliotecas instaladas para geração automática. Para corrigir isso, vamos usar a extensão mais uma vez para executar o comando.

Image for post
Image for post

Encontre e clique no rodapé do editor o texto build_runner watch e aguarde um momento. Será executado um script para geração de classes.

Note que será criada a classe home_controller.g.dart.

Não edite essa classe. Toda vez que você alterar o Store essa classe será gerada/atualizada automaticamente.

A implementação do getInfoMundo e getInfoPais são chamadas aos métodos que implementamos na parte 1.

Para os métodos usamos outro tipo de anotação, @action, que basicamente modifica os observables. Assim, os observadores são notificados somente após a conclusão atômica da ação.

A diferença está na passagem de argumentos do getPais que definimos um valor padrão.

Finalmente codificamos um método para controlar a view da barra de navegação.

HOME UI

Vamos finalizar escrevendo a interface visual.

Ainda na pasta pages criaremos o arquivo home_page.dart

Temos inicialmente a assinatura da classe HomePage estendendo um StatefulWidget

class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}

Em seguida, criamos o estado com a seguinte assinatura:

class _HomePageState extends ModularState<HomePage, HomeController> 

Utilizando o modular podemos usar o ModularState, indicando qual é o controlador.

No build temos o primeiro widget Observer (pacote flutter_mobx). Toda vez que esses observáveis ​​mudarem, o Observer reconstrói e renderiza.

Para acessar as propriedades do controlador (HomeController) invocamos o this.controller.

No body verificamos se os objetos mundo e país estão nulos para decidir a renderização do corpo (_buidBody) ou um widget de espera (CircularProgressIndicator).

Controlamos o índice para alternar entre o Mundo e o País. O índice é passado no método _buildBottomBar() em currentIndex.

Ao longo da classe criamos outros métodos para padronizar a visualização das informações (ver _buildRow, _buildHeader e _buildTile). A prática mais recomendada seria separar em outros widgets para reutilização em outras partes do projeto, se fosse o caso.

No método _buildBodyPais acessamos os valores dos atributos passando no parâmetro dos métodos acima.

Exemplos: controller.pais.nome, controller.pais.urlBandeira …

Finalmente, temos um método que desenha um alert para inserir o nome do país:

Image for post
Image for post

Vinculamos um TextField ao controlador e no onPressed no botão passamos o texto no método getInfoPais.

Bem provável que deixei passar algumas informações da implementação, mas se tiver alguma dúvida, deixe nos comentários.

Se você leu até aqui e gostou, dê um clap!

Código completo do projeto.

Written by

Professor e desenvolvedor

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store