BMI Calculator
The objective of this tutorial is to look at how we can customise Flutter Widgets to achieve our own beautiful user interface designs.
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.
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.
-
Home Page:
-
Result Page:
-
iOS App Recording:
iOS.Simulator.Recording.mov
- Android App Recording:
Android.Emulator.Recording.mov
A few resources to get you started if this is your first Flutter project:
For help getting started with Flutter development, view the online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.