mirror of
https://github.com/londonappbrewery/Flutter-Course-Resources/
synced 2024-11-15 05:44:55 +00:00
33 lines
1.7 KiB
Markdown
33 lines
1.7 KiB
Markdown
|
![App Brewery Banner](https://github.com/londonappbrewery/Images/blob/master/AppBreweryBanner.png)
|
|||
|
|
|||
|
|
|||
|
# 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](https://dribbble.com/shots/4585382-Simple-BMI-Calculator). It will be a multi screen app with simple functionality but full-on custom styling.
|
|||
|
|
|||
|
![Finished App](https://github.com/londonappbrewery/Images/blob/master/bmi-calc-demo.gif)
|
|||
|
|
|||
|
## 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](https://www.appbrewery.co/)
|
|||
|
|
|||
|
![End Banner](https://github.com/londonappbrewery/Images/blob/master/readme-end-banner.png)
|