Desenvolvimento de uma Calculadora de Juros para Boletos vencidos
Notas de aula do professor Kleber de Oliveira Andrade
Prezados, desta vez iremos criar um aplicativo para auxiliar as pessoas a calcular o valor que será pago naqueles boletos atrasados. Para saber mais sobre como calcular juros e multa, veja o vídeo da Carol.
Criando o projeto
- Abra o Visual Studio Code, e abra a paleta de comandos
(Ctrl + Shift + P)e digite:
Flutter: New Project- Digite o nome do projeto Flutter (interest_calculator);
- Selecione a pasta para criar o projeto Flutter;
- Abra o arquivo
main.darte apague tudo.
Abra o arquivo Android →App → Gradle →Wrapper → gradle-wrapper.properties e troque a distributionUrl para https\://services.gradle.org/distributions/gradle-5.6-all.zip
Dependências
No arquivo pubspec.yaml adicione as seguintes dependências para este projeto
Sobre as dependências:
Estrutura do projeto
Dentro do projeto teremos um diretório chamado lib, e a arvore de arquivos deve ser como a apresentada abaixo:
Estude um pouco sobre MVC (Model View Controller) antes de continuar, para que você possa entender o porque fizemos esta separação.
Programa principal
Vamos atualizar o arquivo main.dart
Vale ressaltar que a classe CalculatorPage ainda não existe, por isso o arquivo terá um erro neste momento. Se quiser já resolver este problema, é só criar a classe CalculatorPage (StatefulWidget)
Para mais informações sobre flutter_localizations leia aqui.
Criando os modelos
Modelo (model) armazena dados e notifica suas visões e controladores associados quando há uma mudança em seu estado.
Crie uma classe PaymentSlip (lib → models → payment_slip.dart), que servirá para armazenar as informações do boleto bancário.
Crie uma classe ResultPaymentSlip (lib → models → result_payment_slip.dart), que servirá para armazenar o resultado do calculo de juros.
Vamos também adicionar uma classe Constantes (lib → helpers → constantes.dart), na qual adicionaremos todas as constantes necessárias para o projeto.
Criando o Controle
Controlador (controller) envia comandos para o modelo para atualizar o seu estado (por exemplo, calculando o juros). O controlador também pode enviar comandos para a visão associada para alterar a apresentação da visão do modelo (por exemplo, gerando o resultado).
Criaremos uma classe para calcular o juros (dia ou mês / % ou moeda), a multa (% ou meda) e o valor a ser pago. Para calcular o juros composto precisaremos:
- montante: valor do boleto a ser pago sem atrasos
- taxa: número entre 0 e 0.99 (porcentagem), caso o usuário entre com o valor por dia, será necessário converter para porcentagem
- dias: número total de dias ou meses atrasados
- multa: valor da multa a ser paga em reais
Segue a nossa classe Controller (lib → controllers → controller.dart)
Criando a tela (formulário)
Visão (view) gera uma representação (Visão) dos dados presentes no modelo solicitado, fazendo a exibição dos dados.
Crie uma classe CalculatorPage (lib → pages → calculator_page.dart), que servirá para exibir um formulário com os dados do boleto.
Iremos separar as funções agora para que fique mais fácil o entendimento de como será desenhado a tela.
Título para agrupamento das entradas
Ainda na classe CalculatorPage, vamos criar uma função para apresentar um campo de texto pré formatado, pois iremos utilizar mais de uma vez.
Campo de moeda
Ainda na classe CalculatorPage, teremos 3 campos para digitarmos valores no formato 0.00 (podendo ser moeda ou porcentagem). Para isso iremos criar a função _buildMoneyInputField
Leia mais sobre TextFormField e sobre MoneyMaskedTextController.
Campo de data
Ainda na classe CalculatorPage, criaremos agora um campo que chama um DateTimePicker para que o usuário possa selecionar a data.
Leia mais sobre DateTimeField
Grupo de botões
Ainda na classe CalculatorPage, precisaremos criar agora botões do tipo radio que ao selecionar um botão, automaticamente desativa o outro.
Leia mais sobre RadioButton e CustomRadioButton.
Botão arredondado
Ainda na classe CalculatorPage, vamos criar uma função para criarmos os botões Calcular e Limpar .
Saiba mais sobre a widget Inkwell.
Criando o formulário
Ainda na classe CalculatorPage, utilizaremos a função build para criar um Scaffold com nosso formulário
Saiba mais sobre formulários clicando aqui.
Apresentando o resultado com AlertDialog
Ainda na classe CalculatorPage, vamos criar um AlertDialog para exibir o resultado para o usuário
Leia mais sobre AlertDialog clicando aqui.
Resultados
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 juros para seus boletos vencidos. Agora tome cuidado para não pagar muitos juros, afinal, dinheiro não nasce em árvore.
O código completo pode ser baixado aqui.
Espero que tenham gostado, deixem seus comentários a baixo e um forte abraço!
Desafio
- Não permitir adicionar valores negativos (multas e juros). Você pode adicionar essa validação entendendo mais sobre TextFormField;
- Adicionar um background gradiente (tutorial e uiGradients);
- Adicionar um IconButton na AppBar para exibir informações do aplicativo utilizando a função showAboutDialog (exemplo); Exemplo de como inserir imagens no flutter, clique aqui.
- Criar um IconButton na AppBar para alternar entre os temas Light/dark (use o plugin dynamic_theme e para entender mais sobre os parâmetros do tema use o panache);
- Implementar a função que limpa (clear) a tela na classe Controller.
