londonappbrewery / bmi-calculator-flutter

Learn to Code While Building Apps - The Complete Flutter Development Bootcamp

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.

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

bmi-calculator-flutter's Issues

App icon

I did the app icon in the correct way. But i cant see that icon in my phone's home screen. But when i look the app settings i can see the icon. All time its happening same thing for me. I mean the app icon set by me. The icon already set up by londonappbrewery not happening like this. Once when i did the first "i am rich app"the icon appeared after two days automatically. Can you say a permanent solution for this? (screen shots added)

Can't assign argument type Function

I am getting this error "The argument type 'Function' can't be assigned to the parameter type 'void Function()?"

`class BottomButton extends StatelessWidget {
BottomButton({required this.onTap, required this.buttonTitle});

final Function onTap;
final String buttonTitle;

@OverRide
Widget build(BuildContext context) {
return GestureDetector(
onTap: onTap,
child: Container(
padding: EdgeInsets.only(bottom: 10),
child: Center(
child: Text(
buttonTitle,
style: kLargeButtonTextStyle,
),
),
color: kBottomContainerColour,
margin: EdgeInsets.only(top: 10),
width: double.infinity,
height: kBottomContainerHeight,
),
);
}
}`

bad config in git/config

the error I am getting while running flutter doctor is 'fatal:bad config line 1 in file .git/config'

No option in Android Studio [Latest Version] to Remove widget using ALT+Enter

I am Using Latest Android Studio in Linux & when i try to remove the widget called "Gesture Detector by hitting ALT+ENTER , there is no such option as remove widget except that other options are showing such as wrap up , swap with parent , Wrap with Container etc... i'm stuck in Midlle Please Help me out mam !!

What to do when using Named Routes?

main.dart
initialRoute: '/', routes: { '/': (context) => InputPage(), '/results': (context) => ResultPage(), }

input_page.dart
BottomButton( buttonTitle: 'CALCULATE', onTap: () { CalculatorBrain calc = CalculatorBrain(height: height, weight: weight); Navigator.pushNamed(context, '/results'); }, ),

How do we pass properties to ResultPage() ?

overflow in weight and age card

When i create setState in onPressed in weight and Age card (FlateRoundButton) it overflows.

constants hint

when typing 'k', doesn't give me hints with all constants like in the lesson, I need to be more specific and remember almost whole constant name when typing it. It will be more trouble when the constant list gets longer and I will have to remember or check with constant.dart file for constant name. What can I do to get them hints when type 'k'?

Bottom overflowed by 99885 pixels

flutter version: 3.0.0 stable
dart version 2.17.0
windows 10
android studio 2021.1 patch 3
physical phone: sm A505

Hi,
I'm new to flutter and I have a problem in this section of angela's course.
so in section 12, I did exactly what is in the course I defined a RoundedIconButton and the onPressed function. but when I want to call the onPressed and use the setState I get this overflow error from the screen and the flutter inspector.

this is the code:

RoundIconButton( icon: FontAwesomeIcons.minus, onPressed: () { setState(() { weight--; }); }, ),

if I don't use the setState, it doesn't overflow but there would be no value changing in the interface.
it doesn't happen in the angela's code and I think it is because of flutter version. any idea?

Marked as Objective-C

this repo is marked as objective-c, but it's dart instead!

deprecated version of the Android embedding

hi , i have this error in project , please upgrade it

This app is using a deprecated version of the Android embedding. To avoid unexpected runtime failures, or future build failures, try to migrate this app to the V2 embedding. Take a look at the docs for migrating an app: https://github.com/flutter/flutter/wiki/Upgrading-pre-1.12-Android-projects

body1 is depreciated.

The TextTheme constructors from material design 2014 seems depreciated and new constructors could be used. Check them here : https://api.flutter.dev/flutter/material/TextTheme-class.html

bodyText1 is expected instead of body1

textTheme: TextTheme(body1: TextStyle(color: Colors.white)

needs to be changed from

textTheme: TextTheme(bodyText2: TextStyle(color: Colors.white)

Thanks.
Not a big issue.
Just to keep the course updated.
I thank Angela for making me looking up the docs and fixing the minor bugs.

Section 12 Code Shown by Instructor will not work when Null Safety is enabled.

Section 12 Code Shown by Instructor will not work when Null Safety is enabled.

This section requires updating. Students not familiar with Null Safety will be in a bad place of frustration.

setState() or markNeedsBuild() called during build.

G

OVERFLOWING when iPhone rotates

The specific RenderFlex in question is: RenderFlex#d63a4 relayoutBoundary=up5 OVERFLOWING
... parentData: (can use size)
... constraints: BoxConstraints(w=418.0, 0.0<=h<=59.3)
... size: Size(418.0, 59.3)
... direction: vertical
... mainAxisAlignment: center
... mainAxisSize: max
... crossAxisAlignment: center
... verticalDirection: down
◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ (2) Exception caught by rendering library ═════════════════════════════════════════════════
A RenderFlex overflowed by 57 pixels on the bottom.
The relevant error-causing widget was:
Column file:///Users/kenaitian/projects/bmi-calculator-flutter/lib/icon_content.dart:12:12
════════════════════════════════════════════════════════════════════════════════════════════════════

setState() or markNeedsBuild() called during build.

After taking out Gesture Detection code separately i am getting this error help me on this...

error: 2 positional argument(s) expected, but 1 found.

When I pass the argument it says both are compulsory. Maybe they changed it in flutter SDK I could not find the solution for that.

Help me thanks.

My Custom Widget Class

class ReusableCard extends StatelessWidget {
  ReusableCard(@required this.colour, this.cardChild);

  final Widget cardChild;
  final Color colour;

  @override
  Widget build(BuildContext context) {
    return Container(
      child: cardChild,
      margin: EdgeInsets.all(15.0),
      decoration: BoxDecoration(
        color: colour,
        borderRadius: BorderRadius.circular(10),
      ),
    );
  }
}

Here is the implement of the widget

Expanded(
              child: Row(
                children: <Widget>[
                  Expanded(
                    child: ReusableCard(activeCardColor),
                  ),
                ],
              ),
            ),

primaryColor: Doesnt Work

Font awesome icons are not showing inside widget

body: Column(
children: [
Expanded(
child: Row(
children: [
Expanded(
child: ReusableCard(

                color: activeCardColor,
                cardChild: Column(
                  
                 
                  children: [
                    FaIcon(FontAwesomeIcons.search, size: 80),

                 
                  
                  ],
                ),
              ),
            ),
            Expanded(
              child: ReusableCard(
                color: activeCardColor,
              ),
            ),
          ],
        ),
      ),

this is the imputpage.dart, but it's not working this way, , but why not?