Criando um aplicativo em Flutter para calcular a quantidade de pisos por m²
Notas de aula do professor Kleber de Oliveira Andrade
O piso é uma parte importante de uma construção, por isso merece atenção e cuidado na hora de calcular o m² que será aplicado. Como a maioria dos materiais de construção, o piso também deve ser calculado por m² para saber exatamente quantas unidades serão necessárias para cobrir determinado lugar. Para saber mais detalhes sobre o calculo do piso, veja o vídeo abaixo do professor Aloísio Delpupo.
Criando o aplicativo
Abra o Visual Studio Code, e abra a paleta de comandos F1 e digite: Flutter: New Project
- Digite o nome do projeto Flutter (floor_calculator);
- Selecione a pasta para criar o projeto Flutter;
Estrutura do projeto
Nosso projeto, seguirá o modelo MVC (Model-View-Controller) de desenvolvimento.
Seria também muito bom, você estudar um pouco sobre princípios SOLID
O diagrama abaixo apresenta as comunicações do nosso aplicativo.
- View são classes que implementam a interface do usuário do aplicativo que está sendo construído.
- Controller é a classe que controla o fluxo geral do programa, contém lógica de negócios e serve como um link entre a visualização e o modelo.
- Model descreve a estrutura de dados utilizada também no banco de dados.
Por isso, dentro do projeto teremos um diretório chamado lib, e a arvore de arquivos deve ser como a apresentada abaixo:
Criando os Modelos
Classe RoomModel
Crie a classe RoomModel (lib → models → room_model.dart), que irá persistir as informações de entrada sobre o cômodo.
Classe FloorModel
Crie a classe FloorModel (lib → models → floor_model.dart), que irá persistir as informações de entrada sobre o piso.
Neste momento as duas classes são idênticas, porém existe um desafio para você no final, no qual, deverá modificar a classe FloorModel.
Classe ResultModel
Crie a classe ResultModel (lib → models → result_model.dart), que irá guardar as informações de saída do cálculo. Todos os cálculos são explicados no vídeo do professor Aloísio Delpupo.
Classes auxiliares (Helpers)
Vamos criar algumas classes que podem facilitar nossas vidas na hora de manipular as informações.
Classe ValidatorHelper
Crie a classe ValidatorHelper (lib → helpers → validator_helper.dart), que utilizaremos para definir o método de validações dos campos do formulário.
Classe ParseHelper
Crie a classe ParseHelper (lib → helpers → parse_helper.dart), que utilizaremos para definir o método de conversão dos campos do formulário que estão no formato de texto para números de ponto flutuante.
Criando o Controle
Eu sempre gosto de observar a classe Controller como um diagrama de Caso de Uso. O diagrama de caso de uso descreve a funcionalidade proposta para um novo sistema que será projetado, ou seja, as funcionalidades que precisamos para fazer o nosso controlador.
Crie a classe CalculatorController (lib → controllers → calculator_controller.dart), que servirá para converter os dados de entrada em modelo e realizar o calculo de quantidade de pisos e metragem.
Criando um teste unitário
O teste unitário é uma metodologia que procura aferir a corretude do código, em sua menor fração. Em linguagens orientadas a objetos, essa menor parte do código pode ser um método de uma classe. Neste caso, iremos testar a classe CalculatorController para aferir o resultado (utilizaremos os dados do vídeo).
Crie um novo arquivo (test → calculator_test.dart), que utilizaremos para criar nossos testes unitários. Vou deixar um link aqui sobre mais conteúdos sobre testes unitários em dart.
Recomendo também estudar um pouco sobre TDD (Test Driven Development). Vou deixar um vídeo do Código Fonte TV para vocês entenderem mais sobre o assunto.
Criando as Views
Classe ResultDialog
Crie a classe ResultDialog (lib → widgets→ result_dialog.dart), que utilizaremos exibir o resultado final dos cálculos.
Classe CalculatorPage
Crie a classe CalculatorPage (lib → pages → calculator_page.dart), que exibirá um formulário para ser preenchido pelo usuário.
Criando o método _buildForm que contém o formulário de entrada.
Método _buildVerticalSpace
Vamos analisar algumas funções que existem nesta classe. Foi criado a função _buildHeaderText para desenhar um texto com o fundo da cor do tema.
Também foi criado a função _buildNumberInputField para desenhar os campos de entrada do usuário, pois eles são similares (mudando somente o label e a função para salvar o conteúdo digitado pelo usuário).
Para concluir, temos a função _buildCalculateButton que desenha um botão na tela e quando pressionado, chama a função _calculate. A função _calculate valida o formulário primeiro, depois salvamos os dados, e na sequência é calculado a resposta pelo controlador e é chamado o ResultDialog para exibir o resultado para o usuário.
Tema do aplicativo
Crie um arquivo (lib → core → theme_app.dart), que definirá o tema do aplicativo.
Programa principal
Vamos atualizar o arquivo main.dart para que ele instancia a nossa view CalculatorPage. Neste momento, também podemos definir o tema do aplicativo.
Resultado
Agora, aperte F5 para iniciar a depuração do projeto. Selecione um emulador existente ou crie um novo se for necessário.
Se seu celular estiver plugado no computador e com o modo desenvolver ativado, você poderá rodar o aplicativo direto no celular.
Conseguiu chegar até aqui? Parabéns, você acaba de criar uma calculadora de pisos e revestimentos. Agora você acaba de liberar uma nova conquista!
O código completo pode ser baixado aqui.
Espero que tenham gostado, deixem seus comentários e um forte abraço!
Desafios
- Adicionar um novo atributo (price) na classe FloorModel e um novo campo numérico no CalculatorPage para o usuário digitar o preço;
- Criar uma função para calcular o preço na classe Controller e exibir o resultado no ResultDialog;
- Validar os campos de entrada para quando o usuário digitar valores negativos ou zero;
- Criar uma função para limpar (zerar) os campos do formulário;
- Criar um ícone para o aplicativo (plugin flutter_launcher_icons, tutorial, gerador de ícone). Exemplo de como inserir imagens no flutter, clique aqui.
