Desenvolvendo meu primeiro aplicativo com Flutter – Calculadora IMC (Índice de Massa Corporal)


Kleber Andrade

Aug 25, 2019 · 4 min read

O IMC (Índice de Massa Corporal) é o resultado obtido por meio de uma fórmula matemática, e foi desenvolvido para indicar parâmetros que possam ser usados para avaliar riscos de obesidade a partir de medidas corporais. O cálculo é feito dividindo o peso (em quilogramas) pela altura (em metros) ao quadrado.

Essa fórmula foi desenvolvida ainda no século XVIII pelo belga Adolphe Quételet, cientista de matemática e astronomia que tinha enorme paixão por estatística. Essa fórmula foi reavaliada na década de 1972 pelo americano Ancel Keys, e somente reconhecida no ano de 1980 como um padrão internacional de referência para medidas de obesidade pela Organização Mundial de Saúde.

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

Estrutura de pastas do projeto

  • .idea/: pasta criada pelas IDEs da JetBrain para facilitar algumas funcionalidades nas ferramentas;
  • android/ e ios/: pasta para gerar o APK/IPA com comportamentos específicos das plataformas;
  • lib/: pasta onde colocamos os códigos do nosso projeto;
  • build/: local onde fica a build do nosso projeto em Dart, ela é gerada sempre que rodarmos o comando flutter run;
  • test/: pasta para escrever testes;
  • .gitignore: vem configurado com alguns arquivos para serem ignorados na hora de fazer os commits com o git;
  • .metadata: arquivo usado pelo flutter para gerenciar alguns recursos internos — não devemos mexer nele manualmente;
  • .packages: esse arquivo faz um mapeamento de onde estão instaladas as bibliotecas do seu sistema para o sistema de imports do nosso projeto atual, ele é gerado automaticamente sempre que uma biblioteca nova é instalada;
  • calculadora_imc.iml (nome_do_projeto.iml): arquivo criado para facilitar algumas integrações com o IntelliJ;
  • pubspeck.lock: arquivo usado para gerenciar quais versões das libs que estamos utilizando;
  • pubspec.yml: arquivo onde podemos gerenciar as dependências do projeto;
  • README.MD: arquivo utilizado no github para explicar seu projeto.

Widgets

Para começarmos a estudar Flutter, você precisará aprender sobre Widgets.

Os Widgets são componentes que podem possuir um estado (Stateful Widget) ou não possuir um estado (Stateless Widget) e são usados para construir a interface do usuário (UI).

Existem widgets que tem como papel a organização e disposição de elementos (widgets de layout), tais como:

  • Row: organiza os widgets filhos (children) um do lado do outro;
  • Column: organiza os widgets filhos (children) um abaixo do outro;
  • Container: local (área) para colocar um widget que possibilita configurar parâmetros como paddingmarginbackground, e etc.

Projetando a calculadora de IMC

Abra o arquivo main.dart, exclua o código e adicione o seguinte código.

Parar criarmos os campos de entrada (peso e altura) vamos criar um método que receba o label do campo, a mensagem de erro e o controlador.

Vamos criar agora o método para zerar todos os campos quando o aplicativo for aberto, porém, o método será criado fora do initState, pois iremos reutiliza-lo no botão clear.

Para calcularmos o IMC da pessoa, iremos criar um método calculateIMC e também um método para desenhar um botão.

Para exibirmos o resultado, vamos criar um método para exibir um Text.

Estamos chegando ao fim, agora vamos colocar tudo isso dentro de um formulário para ser validado, utilizando os métodos criados.

Para finalizar, vamos criar o corpo do app com uma barra de navegação para adicionarmos o botão de limpar.

Código completo

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 IMC. Agora tome cuidado com sua saúde e evite a obesidade.

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. Adicionar botões (Toggle ou Radio button) para escolha de gênero (masculino / feminino);
  2. Corrigir o calculo de acordo com o gênero (masculino feminino);
  3. Criar um classe Pessoa com os atributos (peso, altura e gênero), criar métodos para calcular IMC e classificar;
  4. Refatorar o código do aplicativo para utilizar a classe Pessoa;
  5. Aplicar uma escala de cores para o resultado da classificação do IMC;
  6. Aumentar o texto do resultado do IMC (número) e também colocar em negrito.

38 claps

Kleber Andrade

WRITTEN BY

Expert Developer of Robot, Games, Artificial Intelligence. Languages C/C++, Python, Java and C#

Follow

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google

Você está comentando utilizando sua conta Google. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s