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

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

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

    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 !!

    opened by Rajchowdhury420 2
  • What to do when using Named Routes?

    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() ?

    opened by hardiklakhalani 1
  • use AndroidX with 29 API to prevent build failures

    use AndroidX with 29 API to prevent build failures

    Almost all face the problem after cloning the repo which is not using AndroidX and 27 API on latest Flutter release More details of issue here https://stackoverflow.com/questions/59481062/flutter-on-android-studio-cloning-from-git-problem-package-get-has-not-been-ru

    opened by maxeema 1
  • Bottom overflowed by 99885 pixels

    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. Screenshot_20220521-134715

    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?

    opened by kiumarsj 3
  • constants hint

    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'?

    opened by calystary 1
  • Make it it work for current android (api 32) and flutter 2.10.2

    Make it it work for current android (api 32) and flutter 2.10.2

    This time I also upgraded gradle and sdk version to make all warnings like Warning: Mapping new ns http://schemas.android.com/repository/android/common/02 to old ns http://schemas.android.com/repository/android/common/01 go away

    To use it before this PR is merged:

    git clone https://github.com/londonappbrewery/bmi-calculator-flutter.git
    cd bmi-calculator-flutter
    git pull origin pull/29/head
    
    opened by philippkeller 0
  • Color error help

    Color error help

    As of February 14, 2022. If you have a problem with changing the color of the hex code in the latest version of the Flutter, please refer to this code. I'm confused to solve everything in ThemeData, and I just need to color the ScaffoldBackgroundColor in ThemeData, and Title and accent(now not used) respectively.

    opened by llimental 0
Owner
London App Brewery
The Best Programming School in the World
London App Brewery
Starter code for the Clima Project from the Complete Flutter Development Bootcamp

Clima ☁ Our Goal The objective of this tutorial is to learn about asynchronous programming in Dart. We'll look at how to carry out time consuming task

London App Brewery 141 Dec 10, 2022
Starter code for the Dicee project in the Complete Flutter Bootcamp

Dicee ?? Our Goal The objective of this tutorial is to introduce you to the core programming concepts that will form the foundation of most of the app

London App Brewery 190 Dec 31, 2022
flutter development bootcamp layout challenge #2.1

MiCard App Challenge Hey folks! This app is the continuation of the layout_challenge_app. I coded this app from scratch because unfortunate things hap

Damla Çim 1 Jan 6, 2022
Encode App-Dev is a open source project which contains different projects of Application development, Android development, IOS development, Flutter, Kotlin, Dart, Java, Swift etc.

HACKTOBERFEST 2022 Encode App-Dev is an open source project which contains different projects of Application development, Android development, IOS dev

null 4 Dec 4, 2022
A flutter plugin about qr code or bar code scan , it can scan from file、url、memory and camera qr code or bar code .Welcome to feedback your issue.

r_scan A flutter plugin about qr code or bar code scan , it can scan from file、url、memory and camera qr code or bar code .Welcome to feedback your iss

PengHui Li 112 Nov 11, 2022
bootcamp flutter beginner Kuldi Project week 2

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

null 0 Nov 27, 2021
Production-grade project developed during the Reso Coder Academy Flutter Bootcamp: It's a mobile Github repository viewer

RepoStar - GitHub Starred Repository Manager Production-grade project developed during the Reso Coder Academy Flutter Bootcamp. It's a mobile Github s

Kishan Dhankecha 4 Aug 18, 2022
Techcareer.net Flutter Bootcamp Bitirme Projesi

foodie Techcareer.net Flutter Bootcamp Bitirme Projem olan Foodie, bir yemek sipariş uygulamasıdır. Bu projeyi gerçekleştirirken kullandığım yapılar;

Lütfiye Yaşar 4 Oct 3, 2022
This Repository is contain about learn Flutter and Dart [Learn]

Flutter-Dart-Code-Learn-Journey This Repository is contain about learn Flutter and Dart [Learn] Introduction Learn Dart Data Type Control Flow Collect

Adi Nugraha Putra 1 Jan 11, 2022
null 1 Jan 8, 2022
A convenience wrapper for building Flutter apps with PDFTron mobile SDK.

About PDFTron Flutter PDFTron's Flutter PDF library brings smooth, flexible, and stand-alone document viewing and editing solutions using Flutter code

PDFTron Systems Inc. 157 Dec 26, 2022
Practice building basic animations in apps along with managing app state by BLoC State Management, Flutter Slider.

Practice building basic animations in apps along with managing app state by BLoC State Management including: Cubit & Animation Widget, Flutter Slider.

TAD 1 Jun 8, 2022
Code, Exercises & Syllabus for my Complete Dart Course

Dart Course | Code With Andrea This repo contains all the exercises and solutions from my Dart Course. Course Syllabus 1. Introduction Making the most

Andrea Bizzotto 244 Dec 30, 2022
Learn to make beautiful, native apps for Android & iOS

name title subtitle description speaker flutter Flutter Learn to make beautiful, native apps for Android & iOS Flutter is a cross-platform, mobile dev

Akshath Jain 5 Nov 4, 2019
An application built using Flutter that can be used while playing board games if actual or physical dice is missing . This is a dual dice application.

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

dev_allauddin 3 Feb 3, 2022
The codes written while teaching Dart lessons in Flutter Fest

dart_lessons Flutter Fest etkinliğinde Dart dersleri anlatılırken yazılmış kodla

Çağla Betül Sezer 12 Aug 28, 2022
A flutter library for loading images from network, resizing as per container size and caching while being memory sensitive.

Optimized Cached Image A flutter library for loading images from network, resizing and caching them for memory sensitivity. This resizes and stores th

Anvith Bhat 76 Dec 20, 2022
A fast start flutter project to make aps faster and skip setup on every application. I am personally using this structure while creating a new project

Flutter Fast Start A fast start flutter project to make apps faster and skip setup on every application. I am personally using this structure while cr

Okan Demir 2 Dec 15, 2022