Desenvolvimento de uma Calculadora simples com Flutter

Notas de aula do professor Kleber de Oliveira Andrade

Podemos dizer que o ábaco foi a primeira calculadora da história. Este instrumento, criado pelos chineses no século 6 antes de Cristo, dispunha de fios paralelos e arruelas deslizantes que eram capazes de realizar contas de adição e subtração. Embora fosse um instrumento bastante limitado, o ábaco acabou sendo o principal mecanismo de cálculo durante os 24 séculos seguintes.

Em 1642, a calculadora (ou melhor, o ábaco) sofreu uma grande evolução por meio do francês Blaise Pascal. Filho de um cobrador de impostos, Pascal idealizou uma máquina automática de cálculos para ajudar seu pai em sua profissão. A invenção de Pascal foi importante pelo fato desta realizar os cálculos de forma rápida, algo bem diferente do que se via na utilização do ábaco.

Mesmo assim, a máquina de Pascal também realizava apenas operações de adição e subtração. Foi só em 1671 que o filósofo e matemático alemão Gottfried Wilhelm von Leibniz desenvolveu um mecanismo capaz de realizar as outras operações: a “roda graduada”.

No fim do século XIX e início do século XX, as calculadoras eram objetos de uso bastante restrito. Foi nos anos seguintes, com a criação de máquinas cada vez menores e mais baratas que a calculadora se transformou no popular instrumento que conhecemos atualmente.

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 (calculadora);
• Selecione a pasta para criar o projeto Flutter;
• Abra o arquivo main.dart e 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:

• auto_size_text: pub.dev/packages/auto_size_text

Estrutura do projeto

Dentro do projeto teremos um diretório chamado lib, e a arvore de arquivos deve ser como a apresentada abaixo:

Programa principal

Vamos atualizar o arquivo main.dart

Vale ressaltar que a classe Calculator ainda não existe, por isso o arquivo terá um erro neste momento. Se quiser já resolver este problema, é só criar a classe Calculator (StatefulWidget)

Classe Calculator (Interface gráfica)

Crie uma classe Calculator (lib → views→ calculator.dart), que servirá para desenhar a interface da calculadora.

Os métodos criados:

• build: desenha a interface utilizando Column para colocar um Widget em cima do outro (Display — Divider — Keyboard)
• _buildDisplay: desenha o display utilizando o Widget AutoSizeText para que o texto se ajuste a quantidade de digitos
• _buildKeyboardButton: desenha um botão pré-configurado
• _buildKeyboard: desenha o teclado inteiro

Classe Memory (Lógica de negócio)

Crie uma classe Memory (lib → views→ memory.dart), que servirá para criar a lógica da calculadora.

Os métodos criados:

• _clear: limpa a memória (zera todas as variáveis)
• _deleteEndDigit: excluir o último dígito
• _addDigit: adiciona novas dígitos
• _setOperation: define a operação que será realizada
• _calculate: calcula o resultado
• applyCommand: verifica o botão apertado

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 simples calculadora. Agora tome cuidado para não errar mais nenhum cálculo.

O código completo pode ser baixado aqui.

Espero que tenham gostado, deixem seus comentários a baixo e um forte abraço!

Desafio

1. Trocar a fonte do resultado (tutorial, fonte)
2. Criar um ícone para o aplicativo (plugin flutter_launcher_icons, tutorial, gerador de ícone). Exemplo de como inserir imagens no flutter, clique aqui.
3. Criar uma tela de splash (tutorial)
4. Adicionar um botão na AppBar para compartilhar o aplicativo (IconButton, plugin share)
5. Criar um Text em cima do resultado para exibir todas as operações realizadas (10 + 30 + 20 x 10)