BMI Calc in Flutter/Dart

Overview

App Brewery Banner

BMI Calculator 💪

Our Goal

The objective of this tutorial is to look at how we can customise Flutter Widgets to achieve our own beautiful user interface designs. If you have a designer on board, no matter how unconventional their designs are, we can create them using Flutter.

What you will create

We’re going to make a Body Mass Index Calculator inspired by the beautiful designs made by Ruben Vaalt. It will be a multi screen app with simple functionality but full-on custom styling.

Finished App

What you will learn

  • How to use Flutter themes to create coherent branding.
  • How to create multi-page apps using Flutter Routes and Navigator.
  • How to extract and refactor Flutter Widgets with a click of the button.
  • How to pass functions as parameters and fields.
  • How to use the GestureDetector Widget to detect more than just a tap.
  • How to use custom colour palettes by using hex codes.
  • How to customise Flutter Widgets to achieve a specific design style.
  • Understand Dart Enums and the Ternary Operator.
  • Learn about composition vs. inheritance and the Flutter way of creating custom UI.
  • Understand the difference between const and final in Dart and when to use each.

This is a companion project to The App Brewery's Complete Flutter Development Bootcamp, check out the full course at www.appbrewery.co

End Banner

You might also like...

Quiz App to conduct online quiz developed with flutter framework and dart language

Quiz App to conduct online quiz developed with flutter framework and dart language

Online Quiz App A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started

Nov 8, 2022

Examples showing how to use Rid in order to build Dart/Flutter apps integrated with Rust.

Examples showing how to use Rid in order to build Dart/Flutter apps integrated with Rust.

Dec 24, 2022

Package your Flutter app into OS-specific bundles (.app, .exe, etc.) via Dart or the command line.

flutter_app_packager Package your Flutter app into OS-specific bundles (.app, .exe, etc.) via Dart or the command line. The flutter_app_packager sourc

Jan 8, 2023

EasyCal , simple calculator written with flutter using dart language

EasyCal , simple calculator written with flutter using dart language

EasyCal This is my first flutter experience. Getting Started This project is a starting point for a Flutter application. A few resources to get you st

Aug 9, 2022

a small script that converts adobe illustrator paths to dart for use in flutter

a small script that converts adobe illustrator paths to dart for use in flutter

cpainterhelper A simple script that lets you convert adobe illustrator paths to code compatible with flutter's CustomPainter How to use it First set u

Aug 16, 2022

A Dart + Flutter App Using MongoDB

A Dart + Flutter App Using MongoDB

cinemapp A new Dart + Flutter & mongoDB project. Preview of the app Main Page Movie description How does it work Here is the the link to checkout the

Nov 11, 2021

To do and accomplishment app built with Flutter and Dart. Made use of Provider

Todioapp A todo and accomplishment app built with Flutter Getting Started This project is a starting point for a Flutter application. A few resources

Dec 10, 2022

A simple and clean news app made with Flutter and Dart

A simple and clean news app made with Flutter and Dart

News_Application A new Flutter project. Getting Started This project is a starting point for a Flutter application. Google Sing In. Internet Connctivi

Apr 26, 2021

Shopping App developed using Flutter and Dart making use of Provider, Carousel Library, Google FireStore

Shopping App developed using Flutter and Dart making use of Provider, Carousel Library, Google FireStore. It's featuring standard modern shopping app UI

Jan 3, 2023
Owner
Boris Barroso
Boris Barroso
BMI App - The personal documentation while learning Multi Provider with Flutter by making BMI Calculator app

BMI App - The personal documentation while learning Multi Provider with Flutter by making BMI Calculator app

null 0 Feb 13, 2022
A fully responsive BMI calculator app made using flutter and dart with beautiful minimalistic user interface design and easy to use .

BMI_Calculator_Flutter A fully responsive BMI calculator app made using flutter and dart with beautiful minimalistic user interface design and easy to

null 1 Oct 9, 2021
BMI calculator made in Dart / Flutter

BMI calculator ?? The application has been located in Spanish and English. English ???? The application has been created with Dart / Flutter, it allow

Erik Font 1 Jan 4, 2022
A simple BMI calculator made with flutter

BMI calculator A simple BMI calculator made with flutter, where a user has to input his gender, height, weight and age, and the app will give the BMI

Harshil Padsala 0 Nov 13, 2021
This is a bmi calculator app made by flutter

bmi_calculator_app A new Flutter application. Getting Started This project is a starting point for a Flutter application. A few resources to get you s

islam elgendy 1 Jan 3, 2022
BMI Calculator App using Flutter

BMI Calculator app BMI Calculator app project using Flutter Previews Version 1.0.0 : Created the app Publishing app on play store Getting Started This

Ibrahim Fathelbab 1 Sep 17, 2022
BMI Calculator Application using Flutter

bmi_calculator BMI Calculator Application using Flutter. Getting Started This project covers BMI Calculator application implentation. It also covers h

Effortless Code Learning 1 May 23, 2022
A flutter app for beginners when using flutter and Dart packages to speed up development

xylophone A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if thi

Trần Văn Nguyên 1 Nov 15, 2021
The objective is to create a simple app using Dart/Flutter, for make a REST API integration with Flutter, using free JSON API

ListView Builder App The objective is to create a simple app using Dart/Flutter, for make a REST API integration with Flutter, using free JSON API: ht

Rafael Tozzo 1 Dec 7, 2022
Cryptocurrency App with MVP Design Pattern to track all the coins data in realtime for android & iOS . Written in dart using Flutter SDK.

Flutter CryptoCurrency App (MVP) Cryptocurrency App with MVP design pattern to track all the coins data in realtime for android & iOS . Written in dar

Pawan Kumar 287 Dec 30, 2022