From a22808fdf59c4750d31a2b3f3ec02f8bf20e37df Mon Sep 17 00:00:00 2001 From: Alexis Date: Fri, 4 Dec 2020 15:02:49 -0600 Subject: [PATCH 01/34] fixed small inital repository problem with the floating action button --- ios/Flutter/flutter_export_environment.sh | 15 +++++++++++++++ lib/main.dart | 1 + 2 files changed, 16 insertions(+) create mode 100644 ios/Flutter/flutter_export_environment.sh diff --git a/ios/Flutter/flutter_export_environment.sh b/ios/Flutter/flutter_export_environment.sh new file mode 100644 index 00000000..4738b94a --- /dev/null +++ b/ios/Flutter/flutter_export_environment.sh @@ -0,0 +1,15 @@ +#!/bin/sh +# This is a generated file; do not edit or check into version control. +export "FLUTTER_ROOT=C:\Users\front\Documents\flutter" +export "FLUTTER_APPLICATION_PATH=C:\Users\front\Desktop\Flutter_projects\bmi-calculator-flutter" +export "FLUTTER_TARGET=lib\main.dart" +export "FLUTTER_BUILD_DIR=build" +export "SYMROOT=${SOURCE_ROOT}/../build\ios" +export "OTHER_LDFLAGS=$(inherited) -framework Flutter" +export "FLUTTER_FRAMEWORK_DIR=C:\Users\front\Documents\flutter\bin\cache\artifacts\engine\ios" +export "FLUTTER_BUILD_NAME=1.0.0" +export "FLUTTER_BUILD_NUMBER=1" +export "DART_OBFUSCATION=false" +export "TRACK_WIDGET_CREATION=false" +export "TREE_SHAKE_ICONS=false" +export "PACKAGE_CONFIG=.packages" diff --git a/lib/main.dart b/lib/main.dart index 78f51b11..fd0607ca 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -27,6 +27,7 @@ class _InputPageState extends State { child: Text('Body Text'), ), floatingActionButton: FloatingActionButton( + onPressed: () {}, child: Icon(Icons.add), ), ); From 5a2ee98b0f3e1d246b7ad6af11c08890ebe54017 Mon Sep 17 00:00:00 2001 From: Alexis Date: Fri, 4 Dec 2020 16:12:56 -0600 Subject: [PATCH 02/34] learned how to use flutter themes with ThemeData and using a default flutter theme with extra tweeks using copyWith --- lib/main.dart | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/lib/main.dart b/lib/main.dart index fd0607ca..3d6fd656 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -6,6 +6,10 @@ class BMICalculator extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( + theme: ThemeData.dark().copyWith( + primaryColor: Color(0xFF0A0E21), + scaffoldBackgroundColor: Color(0xFF0A0E21), + ), home: InputPage(), ); } From 11d8f8326dab22e69002300cdd5c3753370db890 Mon Sep 17 00:00:00 2001 From: Alexis Date: Mon, 7 Dec 2020 11:07:21 -0600 Subject: [PATCH 03/34] I refactor my function to be a class, and added a field color to change the color of the container, I also learned about the importance of using final when declaring a field of a class --- lib/main.dart | 26 ++------------ lib/pages/InputPage.dart | 52 ++++++++++++++++++++++++++++ lib/widgetBuilder/darkContainer.dart | 19 ++++++++++ 3 files changed, 73 insertions(+), 24 deletions(-) create mode 100644 lib/pages/InputPage.dart create mode 100644 lib/widgetBuilder/darkContainer.dart diff --git a/lib/main.dart b/lib/main.dart index 3d6fd656..15f1a89a 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -1,4 +1,5 @@ import 'package:flutter/material.dart'; +import './pages/InputPage.dart'; void main() => runApp(BMICalculator()); @@ -10,30 +11,7 @@ class BMICalculator extends StatelessWidget { primaryColor: Color(0xFF0A0E21), scaffoldBackgroundColor: Color(0xFF0A0E21), ), - home: InputPage(), - ); - } -} - -class InputPage extends StatefulWidget { - @override - _InputPageState createState() => _InputPageState(); -} - -class _InputPageState extends State { - @override - Widget build(BuildContext context) { - return Scaffold( - appBar: AppBar( - title: Text('BMI CALCULATOR'), - ), - body: Center( - child: Text('Body Text'), - ), - floatingActionButton: FloatingActionButton( - onPressed: () {}, - child: Icon(Icons.add), - ), + home: SafeArea(child: InputPage()), ); } } diff --git a/lib/pages/InputPage.dart b/lib/pages/InputPage.dart new file mode 100644 index 00000000..4cd59bde --- /dev/null +++ b/lib/pages/InputPage.dart @@ -0,0 +1,52 @@ +import 'package:flutter/material.dart'; +import '../widgetBuilder/darkContainer.dart'; + +class InputPage extends StatefulWidget { + @override + _InputPageState createState() => _InputPageState(); +} + +class _InputPageState extends State { + @override + Widget build(BuildContext context) { + return Scaffold( + appBar: AppBar( + title: Text('BMI CALCULATOR'), + ), + body: Column( + children: [ + Expanded( + child: Row( + children: [ + new DarkContainer(color: Color(0xFF1D1E33)), + new DarkContainer(color: Color(0xFF1D1E33)) + ], + ), + ), + Expanded( + child: Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + new DarkContainer(color: Color(0xFF1D1E33)) + // change the DarkContainer width and height to have percentage sizes + // Solve this instead of using fixed sizes I had to use Expanded widgets + ], + ), + ), + Expanded( + child: Row( + children: [ + new DarkContainer(color: Color(0xFF1D1E33)), + new DarkContainer(color: Color(0xFF1D1E33)) + ], + ), + ), + ], + ), + floatingActionButton: FloatingActionButton( + onPressed: () {}, + child: Icon(Icons.add), + ), + ); + } +} diff --git a/lib/widgetBuilder/darkContainer.dart b/lib/widgetBuilder/darkContainer.dart new file mode 100644 index 00000000..90448ac1 --- /dev/null +++ b/lib/widgetBuilder/darkContainer.dart @@ -0,0 +1,19 @@ +import 'package:flutter/cupertino.dart'; + +class DarkContainer extends StatelessWidget { + DarkContainer({@required this.color}); + final Color color; + + @override + Widget build(BuildContext context) { + return Expanded( + child: Container( + margin: EdgeInsets.all(15.0), + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(10.0), + color: color, + ), + ), + ); + } +} From fa2d8c2d578e5781fa954722434246cd55107fdf Mon Sep 17 00:00:00 2001 From: Alexis Date: Mon, 7 Dec 2020 11:54:02 -0600 Subject: [PATCH 04/34] changed color values from hardcoded ones to const values at the top --- lib/pages/InputPage.dart | 25 ++++++++++++++++--------- 1 file changed, 16 insertions(+), 9 deletions(-) diff --git a/lib/pages/InputPage.dart b/lib/pages/InputPage.dart index 4cd59bde..1bf45850 100644 --- a/lib/pages/InputPage.dart +++ b/lib/pages/InputPage.dart @@ -1,6 +1,10 @@ import 'package:flutter/material.dart'; import '../widgetBuilder/darkContainer.dart'; +const bottomContainerHeight = 80.0; +const activeCardColor = Color(0xFF1D1E33); +const bottomContainerColor = Color(0xFFEB1555); + class InputPage extends StatefulWidget { @override _InputPageState createState() => _InputPageState(); @@ -18,8 +22,8 @@ class _InputPageState extends State { Expanded( child: Row( children: [ - new DarkContainer(color: Color(0xFF1D1E33)), - new DarkContainer(color: Color(0xFF1D1E33)) + new DarkContainer(color: activeCardColor), + new DarkContainer(color: activeCardColor) ], ), ), @@ -27,7 +31,7 @@ class _InputPageState extends State { child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ - new DarkContainer(color: Color(0xFF1D1E33)) + new DarkContainer(color: activeCardColor) // change the DarkContainer width and height to have percentage sizes // Solve this instead of using fixed sizes I had to use Expanded widgets ], @@ -36,17 +40,20 @@ class _InputPageState extends State { Expanded( child: Row( children: [ - new DarkContainer(color: Color(0xFF1D1E33)), - new DarkContainer(color: Color(0xFF1D1E33)) + new DarkContainer(color: activeCardColor), + new DarkContainer(color: activeCardColor) ], ), ), + Container( + width: double.infinity, + height: bottomContainerHeight, + margin: EdgeInsets.only(top: 5.0), + decoration: BoxDecoration( + color: bottomContainerColor, + )), ], ), - floatingActionButton: FloatingActionButton( - onPressed: () {}, - child: Icon(Icons.add), - ), ); } } From f3ea33aab5128722a0156373ae47e0f42a8ce306 Mon Sep 17 00:00:00 2001 From: Alexis Date: Mon, 7 Dec 2020 12:02:19 -0600 Subject: [PATCH 05/34] added the property child to my cardClass --- lib/pages/InputPage.dart | 14 +++++++++----- lib/widgetBuilder/darkContainer.dart | 16 ++++++++-------- 2 files changed, 17 insertions(+), 13 deletions(-) diff --git a/lib/pages/InputPage.dart b/lib/pages/InputPage.dart index 1bf45850..ffca2188 100644 --- a/lib/pages/InputPage.dart +++ b/lib/pages/InputPage.dart @@ -22,8 +22,8 @@ class _InputPageState extends State { Expanded( child: Row( children: [ - new DarkContainer(color: activeCardColor), - new DarkContainer(color: activeCardColor) + Expanded(child: new DarkContainer(color: activeCardColor)), + Expanded(child: new DarkContainer(color: activeCardColor)) ], ), ), @@ -31,7 +31,11 @@ class _InputPageState extends State { child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ - new DarkContainer(color: activeCardColor) + Expanded( + child: new DarkContainer( + color: activeCardColor, + ), + ) // change the DarkContainer width and height to have percentage sizes // Solve this instead of using fixed sizes I had to use Expanded widgets ], @@ -40,8 +44,8 @@ class _InputPageState extends State { Expanded( child: Row( children: [ - new DarkContainer(color: activeCardColor), - new DarkContainer(color: activeCardColor) + Expanded(child: new DarkContainer(color: activeCardColor)), + Expanded(child: new DarkContainer(color: activeCardColor)) ], ), ), diff --git a/lib/widgetBuilder/darkContainer.dart b/lib/widgetBuilder/darkContainer.dart index 90448ac1..06754f07 100644 --- a/lib/widgetBuilder/darkContainer.dart +++ b/lib/widgetBuilder/darkContainer.dart @@ -1,18 +1,18 @@ import 'package:flutter/cupertino.dart'; class DarkContainer extends StatelessWidget { - DarkContainer({@required this.color}); + DarkContainer({@required this.color, this.cardChild}); final Color color; + final Widget cardChild; @override Widget build(BuildContext context) { - return Expanded( - child: Container( - margin: EdgeInsets.all(15.0), - decoration: BoxDecoration( - borderRadius: BorderRadius.circular(10.0), - color: color, - ), + return Container( + child: cardChild, + margin: EdgeInsets.all(15.0), + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(10.0), + color: color, ), ); } From 6116179b5ddd40c0d7a0c59e251b213d932b9e35 Mon Sep 17 00:00:00 2001 From: Alexis Date: Mon, 7 Dec 2020 12:04:50 -0600 Subject: [PATCH 06/34] added fontAwesome dependencie --- pubspec.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pubspec.yaml b/pubspec.yaml index 6dc027c6..cf48ab8e 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -11,7 +11,7 @@ dependencies: sdk: flutter cupertino_icons: ^0.1.2 - + font_awesome_flutter: '>= 4.7.0' dev_dependencies: flutter_test: sdk: flutter From a850edc12094230d0f045d71a8e1f348381c6676 Mon Sep 17 00:00:00 2001 From: Alexis Date: Tue, 8 Dec 2020 11:04:06 -0600 Subject: [PATCH 07/34] created a FonTAwesomeWidget class and created the gender containers --- lib/pages/InputPage.dart | 59 ++++++++++++++++++++++-- lib/widgetBuilder/fontAwesomeWidget.dart | 32 +++++++++++++ 2 files changed, 87 insertions(+), 4 deletions(-) create mode 100644 lib/widgetBuilder/fontAwesomeWidget.dart diff --git a/lib/pages/InputPage.dart b/lib/pages/InputPage.dart index ffca2188..d16b5e26 100644 --- a/lib/pages/InputPage.dart +++ b/lib/pages/InputPage.dart @@ -1,5 +1,7 @@ +import 'package:font_awesome_flutter/font_awesome_flutter.dart'; import 'package:flutter/material.dart'; import '../widgetBuilder/darkContainer.dart'; +import 'package:bmi_calculator/widgetBuilder/fontAwesomeWidget.dart'; const bottomContainerHeight = 80.0; const activeCardColor = Color(0xFF1D1E33); @@ -22,8 +24,42 @@ class _InputPageState extends State { Expanded( child: Row( children: [ - Expanded(child: new DarkContainer(color: activeCardColor)), - Expanded(child: new DarkContainer(color: activeCardColor)) + Expanded( + child: new DarkContainer( + color: activeCardColor, + cardChild: Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + FontAwesomeWidget( + margin: EdgeInsets.only(bottom: 8.0), + icon: FaIcon(FontAwesomeIcons.mars), + size: 60.0, + ), + Text( + 'MALE', + style: TextStyle(fontSize: 15.0), + ) + ], + ), + )), + Expanded( + child: new DarkContainer( + color: activeCardColor, + cardChild: Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + FontAwesomeWidget( + margin: EdgeInsets.only(bottom: 8.0), + icon: FaIcon(FontAwesomeIcons.venus), + size: 60.0, + ), + Text( + 'FEMALE', + style: TextStyle(fontSize: 15.0), + ) + ], + ), + )) ], ), ), @@ -33,6 +69,9 @@ class _InputPageState extends State { children: [ Expanded( child: new DarkContainer( + cardChild: Column( + children: [], + ), color: activeCardColor, ), ) @@ -44,8 +83,20 @@ class _InputPageState extends State { Expanded( child: Row( children: [ - Expanded(child: new DarkContainer(color: activeCardColor)), - Expanded(child: new DarkContainer(color: activeCardColor)) + Expanded( + child: new DarkContainer( + color: activeCardColor, + cardChild: Column( + children: [], + ), + )), + Expanded( + child: new DarkContainer( + color: activeCardColor, + cardChild: Column( + children: [], + ), + )) ], ), ), diff --git a/lib/widgetBuilder/fontAwesomeWidget.dart b/lib/widgetBuilder/fontAwesomeWidget.dart new file mode 100644 index 00000000..c756d938 --- /dev/null +++ b/lib/widgetBuilder/fontAwesomeWidget.dart @@ -0,0 +1,32 @@ +import 'package:flutter/material.dart'; +import 'package:flutter/rendering.dart'; + +class FontAwesomeWidget extends StatelessWidget { + FontAwesomeWidget( + {@required this.icon, + @required this.size, + this.color, + this.callback, + this.margin}); + + final icon; + final double size; + final Color color; + final callback; + final EdgeInsetsGeometry margin; + + @override + Widget build(BuildContext context) { + // TODO: implement build + return Container( + margin: margin, + child: IconButton( + // Use the FaIcon Widget + FontAwesomeIcons class for the IconData + icon: icon, + iconSize: size, + onPressed: () { + callback(); + }), + ); + } +} From 7d570063e6d32da71442c7d1bbed62160d3e517e Mon Sep 17 00:00:00 2001 From: Alexis Date: Tue, 8 Dec 2020 11:18:05 -0600 Subject: [PATCH 08/34] refactored my fontAwesomeWidget to hold a column and text for the icon description --- lib/pages/InputPage.dart | 14 ++++------ lib/widgetBuilder/fontAwesomeWidget.dart | 35 +++++++++++++++++------- 2 files changed, 31 insertions(+), 18 deletions(-) diff --git a/lib/pages/InputPage.dart b/lib/pages/InputPage.dart index d16b5e26..2520c7e1 100644 --- a/lib/pages/InputPage.dart +++ b/lib/pages/InputPage.dart @@ -34,11 +34,10 @@ class _InputPageState extends State { margin: EdgeInsets.only(bottom: 8.0), icon: FaIcon(FontAwesomeIcons.mars), size: 60.0, + textColor: Color(0xFF8D8E98), + textSize: 18.0, + iconText: 'MALE', ), - Text( - 'MALE', - style: TextStyle(fontSize: 15.0), - ) ], ), )), @@ -52,11 +51,10 @@ class _InputPageState extends State { margin: EdgeInsets.only(bottom: 8.0), icon: FaIcon(FontAwesomeIcons.venus), size: 60.0, + iconText: 'FEMALE', + textColor: Color(0xFF8D8E98), + textSize: 18.0, ), - Text( - 'FEMALE', - style: TextStyle(fontSize: 15.0), - ) ], ), )) diff --git a/lib/widgetBuilder/fontAwesomeWidget.dart b/lib/widgetBuilder/fontAwesomeWidget.dart index c756d938..ac65abb7 100644 --- a/lib/widgetBuilder/fontAwesomeWidget.dart +++ b/lib/widgetBuilder/fontAwesomeWidget.dart @@ -6,27 +6,42 @@ class FontAwesomeWidget extends StatelessWidget { {@required this.icon, @required this.size, this.color, + @required this.iconText, this.callback, - this.margin}); + this.margin, + @required this.textColor, + @required this.textSize}); final icon; final double size; final Color color; final callback; final EdgeInsetsGeometry margin; + final String iconText; + final double textSize; + final Color textColor; @override Widget build(BuildContext context) { // TODO: implement build - return Container( - margin: margin, - child: IconButton( - // Use the FaIcon Widget + FontAwesomeIcons class for the IconData - icon: icon, - iconSize: size, - onPressed: () { - callback(); - }), + return Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Container( + margin: margin, + child: IconButton( + // Use the FaIcon Widget + FontAwesomeIcons class for the IconData + icon: icon, + iconSize: size, + onPressed: () { + callback(); + }), + ), + Text( + iconText, + style: TextStyle(color: textColor, fontSize: textSize), + ) + ], ); } } From 985db566eb70ea524534a49545e80d06cbf3eae2 Mon Sep 17 00:00:00 2001 From: Alexis Date: Tue, 8 Dec 2020 13:12:36 -0600 Subject: [PATCH 09/34] changed the IconButton to be an Icon --- lib/pages/InputPage.dart | 4 ++-- lib/widgetBuilder/fontAwesomeWidget.dart | 13 +++++-------- 2 files changed, 7 insertions(+), 10 deletions(-) diff --git a/lib/pages/InputPage.dart b/lib/pages/InputPage.dart index 2520c7e1..3e1acf9f 100644 --- a/lib/pages/InputPage.dart +++ b/lib/pages/InputPage.dart @@ -32,7 +32,7 @@ class _InputPageState extends State { children: [ FontAwesomeWidget( margin: EdgeInsets.only(bottom: 8.0), - icon: FaIcon(FontAwesomeIcons.mars), + icon: FontAwesomeIcons.mars, size: 60.0, textColor: Color(0xFF8D8E98), textSize: 18.0, @@ -49,7 +49,7 @@ class _InputPageState extends State { children: [ FontAwesomeWidget( margin: EdgeInsets.only(bottom: 8.0), - icon: FaIcon(FontAwesomeIcons.venus), + icon: FontAwesomeIcons.venus, size: 60.0, iconText: 'FEMALE', textColor: Color(0xFF8D8E98), diff --git a/lib/widgetBuilder/fontAwesomeWidget.dart b/lib/widgetBuilder/fontAwesomeWidget.dart index ac65abb7..909f7cfb 100644 --- a/lib/widgetBuilder/fontAwesomeWidget.dart +++ b/lib/widgetBuilder/fontAwesomeWidget.dart @@ -28,15 +28,12 @@ class FontAwesomeWidget extends StatelessWidget { mainAxisAlignment: MainAxisAlignment.center, children: [ Container( - margin: margin, - child: IconButton( + margin: margin, + child: Icon( // Use the FaIcon Widget + FontAwesomeIcons class for the IconData - icon: icon, - iconSize: size, - onPressed: () { - callback(); - }), - ), + icon, + size: size, + )), Text( iconText, style: TextStyle(color: textColor, fontSize: textSize), From b30a03dc0b5d15b24159e58510598a210a8abf98 Mon Sep 17 00:00:00 2001 From: Alexis Date: Tue, 8 Dec 2020 13:32:15 -0600 Subject: [PATCH 10/34] added gesture Detector to the gender containers so they change color when selecte --- lib/pages/InputPage.dart | 89 +++++++++++++++--------- lib/widgetBuilder/fontAwesomeWidget.dart | 2 +- 2 files changed, 59 insertions(+), 32 deletions(-) diff --git a/lib/pages/InputPage.dart b/lib/pages/InputPage.dart index 3e1acf9f..3760cc92 100644 --- a/lib/pages/InputPage.dart +++ b/lib/pages/InputPage.dart @@ -5,6 +5,7 @@ import 'package:bmi_calculator/widgetBuilder/fontAwesomeWidget.dart'; const bottomContainerHeight = 80.0; const activeCardColor = Color(0xFF1D1E33); +const inactiveCardColor = Color(0xFF111328); const bottomContainerColor = Color(0xFFEB1555); class InputPage extends StatefulWidget { @@ -13,6 +14,8 @@ class InputPage extends StatefulWidget { } class _InputPageState extends State { + Color maleCardColor = inactiveCardColor; + Color femaleCardColor = inactiveCardColor; @override Widget build(BuildContext context) { return Scaffold( @@ -25,37 +28,51 @@ class _InputPageState extends State { child: Row( children: [ Expanded( - child: new DarkContainer( - color: activeCardColor, - cardChild: Column( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - FontAwesomeWidget( - margin: EdgeInsets.only(bottom: 8.0), - icon: FontAwesomeIcons.mars, - size: 60.0, - textColor: Color(0xFF8D8E98), - textSize: 18.0, - iconText: 'MALE', - ), - ], + child: GestureDetector( + onTap: () { + setState(() { + selectedGender(1); + }); + }, + child: new DarkContainer( + color: maleCardColor, + cardChild: Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + FontAwesomeWidget( + margin: EdgeInsets.only(bottom: 8.0), + icon: FontAwesomeIcons.mars, + size: 60.0, + textColor: Color(0xFF8D8E98), + textSize: 18.0, + iconText: 'MALE', + ), + ], + ), ), )), Expanded( - child: new DarkContainer( - color: activeCardColor, - cardChild: Column( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - FontAwesomeWidget( - margin: EdgeInsets.only(bottom: 8.0), - icon: FontAwesomeIcons.venus, - size: 60.0, - iconText: 'FEMALE', - textColor: Color(0xFF8D8E98), - textSize: 18.0, - ), - ], + child: GestureDetector( + onTap: () { + setState(() { + selectedGender(2); + }); + }, + child: new DarkContainer( + color: femaleCardColor, + cardChild: Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + FontAwesomeWidget( + margin: EdgeInsets.only(bottom: 8.0), + icon: FontAwesomeIcons.venus, + size: 60.0, + iconText: 'FEMALE', + textColor: Color(0xFF8D8E98), + textSize: 18.0, + ), + ], + ), ), )) ], @@ -70,7 +87,7 @@ class _InputPageState extends State { cardChild: Column( children: [], ), - color: activeCardColor, + color: inactiveCardColor, ), ) // change the DarkContainer width and height to have percentage sizes @@ -83,14 +100,14 @@ class _InputPageState extends State { children: [ Expanded( child: new DarkContainer( - color: activeCardColor, + color: inactiveCardColor, cardChild: Column( children: [], ), )), Expanded( child: new DarkContainer( - color: activeCardColor, + color: inactiveCardColor, cardChild: Column( children: [], ), @@ -109,4 +126,14 @@ class _InputPageState extends State { ), ); } + + selectedGender(int gender) { + if (gender == 1) { + maleCardColor = activeCardColor; + femaleCardColor = inactiveCardColor; + } else { + femaleCardColor = activeCardColor; + maleCardColor = inactiveCardColor; + } + } } diff --git a/lib/widgetBuilder/fontAwesomeWidget.dart b/lib/widgetBuilder/fontAwesomeWidget.dart index 909f7cfb..060afbf9 100644 --- a/lib/widgetBuilder/fontAwesomeWidget.dart +++ b/lib/widgetBuilder/fontAwesomeWidget.dart @@ -23,7 +23,6 @@ class FontAwesomeWidget extends StatelessWidget { @override Widget build(BuildContext context) { - // TODO: implement build return Column( mainAxisAlignment: MainAxisAlignment.center, children: [ @@ -33,6 +32,7 @@ class FontAwesomeWidget extends StatelessWidget { // Use the FaIcon Widget + FontAwesomeIcons class for the IconData icon, size: size, + color: color, )), Text( iconText, From 71e6de5fbd2eec2d4eaeab73ed193a74270396f8 Mon Sep 17 00:00:00 2001 From: Alexis Date: Mon, 14 Dec 2020 21:41:25 -0600 Subject: [PATCH 11/34] changed selectedGender function to use Gender enum --- lib/pages/InputPage.dart | 14 ++++++++------ lib/widgetBuilder/darkContainer.dart | 2 +- lib/widgetBuilder/slider.dart | 5 +++++ 3 files changed, 14 insertions(+), 7 deletions(-) create mode 100644 lib/widgetBuilder/slider.dart diff --git a/lib/pages/InputPage.dart b/lib/pages/InputPage.dart index 3760cc92..853b222f 100644 --- a/lib/pages/InputPage.dart +++ b/lib/pages/InputPage.dart @@ -4,10 +4,12 @@ import '../widgetBuilder/darkContainer.dart'; import 'package:bmi_calculator/widgetBuilder/fontAwesomeWidget.dart'; const bottomContainerHeight = 80.0; -const activeCardColor = Color(0xFF1D1E33); -const inactiveCardColor = Color(0xFF111328); +const inactiveCardColor = Color(0xFF1D1E33); +const activeCardColor = Color(0xFF111328); const bottomContainerColor = Color(0xFFEB1555); +enum Gender { male, female } + class InputPage extends StatefulWidget { @override _InputPageState createState() => _InputPageState(); @@ -31,7 +33,7 @@ class _InputPageState extends State { child: GestureDetector( onTap: () { setState(() { - selectedGender(1); + selectedGender(Gender.male); }); }, child: new DarkContainer( @@ -55,7 +57,7 @@ class _InputPageState extends State { child: GestureDetector( onTap: () { setState(() { - selectedGender(2); + selectedGender(Gender.female); }); }, child: new DarkContainer( @@ -127,8 +129,8 @@ class _InputPageState extends State { ); } - selectedGender(int gender) { - if (gender == 1) { + selectedGender(Gender gender) { + if (gender == Gender.male) { maleCardColor = activeCardColor; femaleCardColor = inactiveCardColor; } else { diff --git a/lib/widgetBuilder/darkContainer.dart b/lib/widgetBuilder/darkContainer.dart index 06754f07..a20da4cb 100644 --- a/lib/widgetBuilder/darkContainer.dart +++ b/lib/widgetBuilder/darkContainer.dart @@ -1,4 +1,4 @@ -import 'package:flutter/cupertino.dart'; +import 'package:flutter/material.dart'; class DarkContainer extends StatelessWidget { DarkContainer({@required this.color, this.cardChild}); diff --git a/lib/widgetBuilder/slider.dart b/lib/widgetBuilder/slider.dart new file mode 100644 index 00000000..d1c29475 --- /dev/null +++ b/lib/widgetBuilder/slider.dart @@ -0,0 +1,5 @@ +import 'package:flutter/material.dart'; + +enum Gender { male, female } + +sliderBuilder() {} From 71676f40b005dff60be743a95800662cfb8380eb Mon Sep 17 00:00:00 2001 From: Alexis Date: Mon, 14 Dec 2020 22:06:24 -0600 Subject: [PATCH 12/34] deleted the selectedGender function to change the behavior for a ternary operator on the color property --- lib/pages/InputPage.dart | 31 ++++++++++++++++++------------- 1 file changed, 18 insertions(+), 13 deletions(-) diff --git a/lib/pages/InputPage.dart b/lib/pages/InputPage.dart index 853b222f..73ae7004 100644 --- a/lib/pages/InputPage.dart +++ b/lib/pages/InputPage.dart @@ -9,6 +9,7 @@ const activeCardColor = Color(0xFF111328); const bottomContainerColor = Color(0xFFEB1555); enum Gender { male, female } +Gender selectedGender; class InputPage extends StatefulWidget { @override @@ -33,11 +34,13 @@ class _InputPageState extends State { child: GestureDetector( onTap: () { setState(() { - selectedGender(Gender.male); + selectedGender = Gender.male; }); }, child: new DarkContainer( - color: maleCardColor, + color: selectedGender == Gender.male + ? activeCardColor + : inactiveCardColor, cardChild: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ @@ -57,11 +60,13 @@ class _InputPageState extends State { child: GestureDetector( onTap: () { setState(() { - selectedGender(Gender.female); + selectedGender = Gender.female; }); }, child: new DarkContainer( - color: femaleCardColor, + color: selectedGender == Gender.female + ? activeCardColor + : inactiveCardColor, cardChild: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ @@ -129,13 +134,13 @@ class _InputPageState extends State { ); } - selectedGender(Gender gender) { - if (gender == Gender.male) { - maleCardColor = activeCardColor; - femaleCardColor = inactiveCardColor; - } else { - femaleCardColor = activeCardColor; - maleCardColor = inactiveCardColor; - } - } + // selectedGender(Gender gender) { + // if (gender == Gender.male) { + // maleCardColor = activeCardColor; + // femaleCardColor = inactiveCardColor; + // } else { + // femaleCardColor = activeCardColor; + // maleCardColor = inactiveCardColor; + // } + // } } From 328b158cc2dfc5f248ace415873a3e8d538cfbe0 Mon Sep 17 00:00:00 2001 From: Alexis Date: Mon, 14 Dec 2020 22:09:27 -0600 Subject: [PATCH 13/34] changed colors --- lib/pages/InputPage.dart | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/lib/pages/InputPage.dart b/lib/pages/InputPage.dart index 73ae7004..47436970 100644 --- a/lib/pages/InputPage.dart +++ b/lib/pages/InputPage.dart @@ -17,8 +17,8 @@ class InputPage extends StatefulWidget { } class _InputPageState extends State { - Color maleCardColor = inactiveCardColor; - Color femaleCardColor = inactiveCardColor; + Color maleCardColor = activeCardColor; + Color femaleCardColor = activeCardColor; @override Widget build(BuildContext context) { return Scaffold( @@ -39,8 +39,8 @@ class _InputPageState extends State { }, child: new DarkContainer( color: selectedGender == Gender.male - ? activeCardColor - : inactiveCardColor, + ? inactiveCardColor + : activeCardColor, cardChild: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ @@ -65,8 +65,8 @@ class _InputPageState extends State { }, child: new DarkContainer( color: selectedGender == Gender.female - ? activeCardColor - : inactiveCardColor, + ? inactiveCardColor + : activeCardColor, cardChild: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ From 3d9f02eb35d80b5b8fd9890f177c2b718a5e55b9 Mon Sep 17 00:00:00 2001 From: Alexis Date: Mon, 14 Dec 2020 22:25:35 -0600 Subject: [PATCH 14/34] removed the gestureDetector and instead add it to the darkContainer widget, also created an onPress function --- lib/pages/InputPage.dart | 72 +++++++++++++--------------- lib/widgetBuilder/darkContainer.dart | 18 ++++--- 2 files changed, 45 insertions(+), 45 deletions(-) diff --git a/lib/pages/InputPage.dart b/lib/pages/InputPage.dart index 47436970..a94941a7 100644 --- a/lib/pages/InputPage.dart +++ b/lib/pages/InputPage.dart @@ -31,55 +31,51 @@ class _InputPageState extends State { child: Row( children: [ Expanded( - child: GestureDetector( - onTap: () { + child: new DarkContainer( + onPress: () { setState(() { selectedGender = Gender.male; }); }, - child: new DarkContainer( - color: selectedGender == Gender.male - ? inactiveCardColor - : activeCardColor, - cardChild: Column( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - FontAwesomeWidget( - margin: EdgeInsets.only(bottom: 8.0), - icon: FontAwesomeIcons.mars, - size: 60.0, - textColor: Color(0xFF8D8E98), - textSize: 18.0, - iconText: 'MALE', - ), - ], - ), + color: selectedGender == Gender.male + ? inactiveCardColor + : activeCardColor, + cardChild: Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + FontAwesomeWidget( + margin: EdgeInsets.only(bottom: 8.0), + icon: FontAwesomeIcons.mars, + size: 60.0, + textColor: Color(0xFF8D8E98), + textSize: 18.0, + iconText: 'MALE', + ), + ], ), )), Expanded( - child: GestureDetector( - onTap: () { + child: new DarkContainer( + onPress: () { setState(() { selectedGender = Gender.female; }); }, - child: new DarkContainer( - color: selectedGender == Gender.female - ? inactiveCardColor - : activeCardColor, - cardChild: Column( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - FontAwesomeWidget( - margin: EdgeInsets.only(bottom: 8.0), - icon: FontAwesomeIcons.venus, - size: 60.0, - iconText: 'FEMALE', - textColor: Color(0xFF8D8E98), - textSize: 18.0, - ), - ], - ), + color: selectedGender == Gender.female + ? inactiveCardColor + : activeCardColor, + cardChild: Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + FontAwesomeWidget( + margin: EdgeInsets.only(bottom: 8.0), + icon: FontAwesomeIcons.venus, + size: 60.0, + iconText: 'FEMALE', + textColor: Color(0xFF8D8E98), + textSize: 18.0, + ), + ], ), )) ], diff --git a/lib/widgetBuilder/darkContainer.dart b/lib/widgetBuilder/darkContainer.dart index a20da4cb..9eb65974 100644 --- a/lib/widgetBuilder/darkContainer.dart +++ b/lib/widgetBuilder/darkContainer.dart @@ -1,18 +1,22 @@ import 'package:flutter/material.dart'; class DarkContainer extends StatelessWidget { - DarkContainer({@required this.color, this.cardChild}); + DarkContainer({@required this.color, this.cardChild, this.onPress}); final Color color; final Widget cardChild; + final Function onPress; @override Widget build(BuildContext context) { - return Container( - child: cardChild, - margin: EdgeInsets.all(15.0), - decoration: BoxDecoration( - borderRadius: BorderRadius.circular(10.0), - color: color, + return GestureDetector( + onTap: onPress , + child: Container( + child: cardChild, + margin: EdgeInsets.all(15.0), + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(10.0), + color: color, + ), ), ); } From 6b9a69f8ed0fbcf84ba7c0d28e73179639e760fa Mon Sep 17 00:00:00 2001 From: Alexis Date: Mon, 14 Dec 2020 22:35:08 -0600 Subject: [PATCH 15/34] I have to implement the custom slider widget --- lib/widgetBuilder/slider.dart | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/lib/widgetBuilder/slider.dart b/lib/widgetBuilder/slider.dart index d1c29475..bf4391b9 100644 --- a/lib/widgetBuilder/slider.dart +++ b/lib/widgetBuilder/slider.dart @@ -1,5 +1,12 @@ import 'package:flutter/material.dart'; -enum Gender { male, female } +class CustomSlider extends StatelessWidget { + CustomSlider({this.values}); + final List values; -sliderBuilder() {} + @override + Widget build(BuildContext context) { + return Slider(value: this.values[1], onChanged: null); + // implement this + } +} From f3b905eaf4c7677043ac8c767f457bda58abe2c2 Mon Sep 17 00:00:00 2001 From: Alexis Date: Tue, 15 Dec 2020 10:27:43 -0600 Subject: [PATCH 16/34] added an slider and make it work, now I have to finish the styling --- lib/main.dart | 9 ++++++--- lib/pages/InputPage.dart | 18 ++++++++++++++++-- lib/widgetBuilder/slider.dart | 22 ++++++++++++++++++++-- 3 files changed, 42 insertions(+), 7 deletions(-) diff --git a/lib/main.dart b/lib/main.dart index 15f1a89a..112b686f 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -8,9 +8,12 @@ class BMICalculator extends StatelessWidget { Widget build(BuildContext context) { return MaterialApp( theme: ThemeData.dark().copyWith( - primaryColor: Color(0xFF0A0E21), - scaffoldBackgroundColor: Color(0xFF0A0E21), - ), + primaryColor: Color(0xFF0A0E21), + scaffoldBackgroundColor: Color(0xFF0A0E21), + sliderTheme: SliderThemeData( + inactiveTickMarkColor: Colors.pink[600], + valueIndicatorColor: Colors.pinkAccent, + thumbColor: Color(0xFF111328))), home: SafeArea(child: InputPage()), ); } diff --git a/lib/pages/InputPage.dart b/lib/pages/InputPage.dart index a94941a7..89095e51 100644 --- a/lib/pages/InputPage.dart +++ b/lib/pages/InputPage.dart @@ -2,11 +2,13 @@ import 'package:font_awesome_flutter/font_awesome_flutter.dart'; import 'package:flutter/material.dart'; import '../widgetBuilder/darkContainer.dart'; import 'package:bmi_calculator/widgetBuilder/fontAwesomeWidget.dart'; +import '../widgetBuilder/slider.dart'; const bottomContainerHeight = 80.0; const inactiveCardColor = Color(0xFF1D1E33); const activeCardColor = Color(0xFF111328); const bottomContainerColor = Color(0xFFEB1555); +double _sliderCurrentValue = 10.0; enum Gender { male, female } Gender selectedGender; @@ -88,8 +90,20 @@ class _InputPageState extends State { Expanded( child: new DarkContainer( cardChild: Column( - children: [], - ), + mainAxisAlignment: MainAxisAlignment.center, + children: [ + new CustomSlider( + currentValue: _sliderCurrentValue, + minValue: 0.0, + maxValue: 100.0, + numDivisions: 10, + onPress: (double value) { + setState(() { + _sliderCurrentValue = value; + }); + }, + ) + ]), color: inactiveCardColor, ), ) diff --git a/lib/widgetBuilder/slider.dart b/lib/widgetBuilder/slider.dart index bf4391b9..a91ea8aa 100644 --- a/lib/widgetBuilder/slider.dart +++ b/lib/widgetBuilder/slider.dart @@ -1,12 +1,30 @@ import 'package:flutter/material.dart'; class CustomSlider extends StatelessWidget { - CustomSlider({this.values}); + CustomSlider( + {this.currentValue, + this.values, + this.minValue, + this.maxValue, + this.numDivisions, + this.onPress}); final List values; + final double currentValue; + final double minValue; + final double maxValue; + final int numDivisions; + final Function onPress; @override Widget build(BuildContext context) { - return Slider(value: this.values[1], onChanged: null); + return Slider( + value: currentValue, + onChanged: onPress, + min: minValue, + max: maxValue, + label: currentValue.round().toString(), + divisions: numDivisions, + ); // implement this } } From 9580a04abfe9e210a2c7a6f4a9d64c01cde0743a Mon Sep 17 00:00:00 2001 From: Alexis Date: Tue, 15 Dec 2020 10:33:26 -0600 Subject: [PATCH 17/34] finished the style --- lib/main.dart | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/lib/main.dart b/lib/main.dart index 112b686f..3f33d6a8 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -13,7 +13,10 @@ class BMICalculator extends StatelessWidget { sliderTheme: SliderThemeData( inactiveTickMarkColor: Colors.pink[600], valueIndicatorColor: Colors.pinkAccent, - thumbColor: Color(0xFF111328))), + inactiveTrackColor: Colors.pink[200], + activeTrackColor: Colors.pinkAccent, + thumbColor: Colors.pink[600]), + indicatorColor: Colors.pinkAccent), home: SafeArea(child: InputPage()), ); } From 845de8baf7cc381f9972568ac73a0bdaa11c8ff9 Mon Sep 17 00:00:00 2001 From: Alexis Date: Tue, 15 Dec 2020 10:45:52 -0600 Subject: [PATCH 18/34] finish the styling --- lib/main.dart | 3 ++- lib/pages/InputPage.dart | 14 ++++++++++++++ 2 files changed, 16 insertions(+), 1 deletion(-) diff --git a/lib/main.dart b/lib/main.dart index 3f33d6a8..60fcf9ac 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -12,8 +12,9 @@ class BMICalculator extends StatelessWidget { scaffoldBackgroundColor: Color(0xFF0A0E21), sliderTheme: SliderThemeData( inactiveTickMarkColor: Colors.pink[600], + overlayColor: Colors.pinkAccent[600], valueIndicatorColor: Colors.pinkAccent, - inactiveTrackColor: Colors.pink[200], + inactiveTrackColor: Colors.grey[600], activeTrackColor: Colors.pinkAccent, thumbColor: Colors.pink[600]), indicatorColor: Colors.pinkAccent), diff --git a/lib/pages/InputPage.dart b/lib/pages/InputPage.dart index 89095e51..6eea6037 100644 --- a/lib/pages/InputPage.dart +++ b/lib/pages/InputPage.dart @@ -92,6 +92,20 @@ class _InputPageState extends State { cardChild: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ + Text( + 'HEIGHT', + style: TextStyle( + color: Color(0xFF8D8E98), + fontSize: 18.0, + ), + ), + Text( + _sliderCurrentValue.round().toString(), + style: TextStyle( + color: Colors.white, + fontSize: 35.0, + fontWeight: FontWeight.w500), + ), new CustomSlider( currentValue: _sliderCurrentValue, minValue: 0.0, From 454df85be55aa499eb33cd3bf94e8c8f81ec79a3 Mon Sep 17 00:00:00 2001 From: Alexis Date: Wed, 16 Dec 2020 13:57:53 -0600 Subject: [PATCH 19/34] have to finish the count widget --- lib/constants.dart | 10 +++++ lib/main.dart | 5 ++- lib/pages/InputPage.dart | 47 +++++++++++++----------- lib/widgetBuilder/countWidget.dart | 1 + lib/widgetBuilder/threelevelsWidget.dart | 21 +++++++++++ 5 files changed, 61 insertions(+), 23 deletions(-) create mode 100644 lib/constants.dart create mode 100644 lib/widgetBuilder/countWidget.dart create mode 100644 lib/widgetBuilder/threelevelsWidget.dart diff --git a/lib/constants.dart b/lib/constants.dart new file mode 100644 index 00000000..cfcc3003 --- /dev/null +++ b/lib/constants.dart @@ -0,0 +1,10 @@ +import 'package:flutter/material.dart'; + +const bottomContainerHeight = 80.0; +const inactiveCardColor = Color(0xFF1D1E33); +const activeCardColor = Color(0xFF111328); +const bottomContainerColor = Color(0xFFEB1555); + +const LabelTextStyle = TextStyle(fontSize: 18.0, color: Color(0xFF8D8398)); + +const NumberTextStyle = TextStyle(fontSize: 50.0, fontWeight: FontWeight.w900); diff --git a/lib/main.dart b/lib/main.dart index 60fcf9ac..54763650 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -7,12 +7,15 @@ class BMICalculator extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( + debugShowCheckedModeBanner: false, theme: ThemeData.dark().copyWith( primaryColor: Color(0xFF0A0E21), scaffoldBackgroundColor: Color(0xFF0A0E21), sliderTheme: SliderThemeData( + overlayShape: RoundSliderOverlayShape(overlayRadius: 30.0), + thumbShape: RoundSliderThumbShape(enabledThumbRadius: 15.0), inactiveTickMarkColor: Colors.pink[600], - overlayColor: Colors.pinkAccent[600], + overlayColor: Color(0x29EB1555), valueIndicatorColor: Colors.pinkAccent, inactiveTrackColor: Colors.grey[600], activeTrackColor: Colors.pinkAccent, diff --git a/lib/pages/InputPage.dart b/lib/pages/InputPage.dart index 6eea6037..9c588473 100644 --- a/lib/pages/InputPage.dart +++ b/lib/pages/InputPage.dart @@ -3,13 +3,12 @@ import 'package:flutter/material.dart'; import '../widgetBuilder/darkContainer.dart'; import 'package:bmi_calculator/widgetBuilder/fontAwesomeWidget.dart'; import '../widgetBuilder/slider.dart'; +import '../constants.dart'; +import '../widgetBuilder/threelevelsWidget.dart'; -const bottomContainerHeight = 80.0; -const inactiveCardColor = Color(0xFF1D1E33); -const activeCardColor = Color(0xFF111328); -const bottomContainerColor = Color(0xFFEB1555); -double _sliderCurrentValue = 10.0; - +double _sliderCurrentValue = 130.0; +double _weightCurrentValue = 50.0; +double _ageCurrentValue = 22.0; enum Gender { male, female } Gender selectedGender; @@ -94,23 +93,25 @@ class _InputPageState extends State { children: [ Text( 'HEIGHT', - style: TextStyle( - color: Color(0xFF8D8E98), - fontSize: 18.0, - ), + style: LabelTextStyle, ), - Text( - _sliderCurrentValue.round().toString(), - style: TextStyle( - color: Colors.white, - fontSize: 35.0, - fontWeight: FontWeight.w500), + Row( + mainAxisAlignment: MainAxisAlignment.center, + crossAxisAlignment: CrossAxisAlignment.baseline, + textBaseline: TextBaseline.alphabetic, + children: [ + Text(_sliderCurrentValue.round().toString(), + style: NumberTextStyle), + Text( + 'cm', + style: LabelTextStyle, + ), + ], ), new CustomSlider( currentValue: _sliderCurrentValue, - minValue: 0.0, - maxValue: 100.0, - numDivisions: 10, + minValue: 120.0, + maxValue: 220.0, onPress: (double value) { setState(() { _sliderCurrentValue = value; @@ -132,9 +133,11 @@ class _InputPageState extends State { Expanded( child: new DarkContainer( color: inactiveCardColor, - cardChild: Column( - children: [], - ), + cardChild: new ThreeLevelWidget( + // had to end up building the countWidget + labelText: 'WEIGHT', + numberText: _weightCurrentValue.round().toString(), + customChild: null), )), Expanded( child: new DarkContainer( diff --git a/lib/widgetBuilder/countWidget.dart b/lib/widgetBuilder/countWidget.dart new file mode 100644 index 00000000..a47f241e --- /dev/null +++ b/lib/widgetBuilder/countWidget.dart @@ -0,0 +1 @@ +import 'package:flutter/material.dart'; diff --git a/lib/widgetBuilder/threelevelsWidget.dart b/lib/widgetBuilder/threelevelsWidget.dart new file mode 100644 index 00000000..91a0d66d --- /dev/null +++ b/lib/widgetBuilder/threelevelsWidget.dart @@ -0,0 +1,21 @@ +import 'package:flutter/material.dart'; +import '../constants.dart'; + +class ThreeLevelWidget { + ThreeLevelWidget({ + @required this.labelText, + @required this.numberText, + @required this.customChild, + }); + final String labelText; + final String numberText; + final Widget customChild; + + @override + Widget build(BuildContext context) { + return Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [Text(labelText, style: LabelTextStyle,), Text(numberText, style: NumberTextStyle,), customChild], + ); + } +} From 17e245fc393cbaf5720f0957e75013b9f1431b37 Mon Sep 17 00:00:00 2001 From: Alexis Date: Fri, 18 Dec 2020 21:47:56 -0600 Subject: [PATCH 20/34] created the countWidget --- lib/pages/InputPage.dart | 11 ++++++++--- lib/widgetBuilder/countWidget.dart | 19 +++++++++++++++++++ lib/widgetBuilder/darkContainer.dart | 6 +++--- lib/widgetBuilder/threelevelsWidget.dart | 18 ++++++++++++++---- 4 files changed, 44 insertions(+), 10 deletions(-) diff --git a/lib/pages/InputPage.dart b/lib/pages/InputPage.dart index 9c588473..66998802 100644 --- a/lib/pages/InputPage.dart +++ b/lib/pages/InputPage.dart @@ -5,6 +5,7 @@ import 'package:bmi_calculator/widgetBuilder/fontAwesomeWidget.dart'; import '../widgetBuilder/slider.dart'; import '../constants.dart'; import '../widgetBuilder/threelevelsWidget.dart'; +import '../widgetBuilder/countWidget.dart'; double _sliderCurrentValue = 130.0; double _weightCurrentValue = 50.0; @@ -137,13 +138,17 @@ class _InputPageState extends State { // had to end up building the countWidget labelText: 'WEIGHT', numberText: _weightCurrentValue.round().toString(), - customChild: null), + customChild: new CountWidget( + firstCallBack: () {}, secondCallBack: () {})), )), Expanded( child: new DarkContainer( color: inactiveCardColor, - cardChild: Column( - children: [], + cardChild: new ThreeLevelWidget( + labelText: 'AGE', + numberText: _ageCurrentValue.round().toString(), + customChild: new CountWidget( + firstCallBack: () {}, secondCallBack: () {}), ), )) ], diff --git a/lib/widgetBuilder/countWidget.dart b/lib/widgetBuilder/countWidget.dart index a47f241e..a6eac023 100644 --- a/lib/widgetBuilder/countWidget.dart +++ b/lib/widgetBuilder/countWidget.dart @@ -1 +1,20 @@ import 'package:flutter/material.dart'; + +class CountWidget extends StatelessWidget { + CountWidget({@required this.firstCallBack, @required this.secondCallBack}); + final Function firstCallBack; + final Function secondCallBack; + + @override + Widget build(BuildContext context) { + return Row( + children: [ + FlatButton( + onPressed: firstCallBack, + child: Icon(Icons.add), + ), + FlatButton(onPressed: secondCallBack, child: Icon(Icons.remove)) + ], + ); + } +} diff --git a/lib/widgetBuilder/darkContainer.dart b/lib/widgetBuilder/darkContainer.dart index 9eb65974..0f0efb13 100644 --- a/lib/widgetBuilder/darkContainer.dart +++ b/lib/widgetBuilder/darkContainer.dart @@ -3,14 +3,14 @@ import 'package:flutter/material.dart'; class DarkContainer extends StatelessWidget { DarkContainer({@required this.color, this.cardChild, this.onPress}); final Color color; - final Widget cardChild; + final cardChild; final Function onPress; @override Widget build(BuildContext context) { return GestureDetector( - onTap: onPress , - child: Container( + onTap: onPress, + child: Container( child: cardChild, margin: EdgeInsets.all(15.0), decoration: BoxDecoration( diff --git a/lib/widgetBuilder/threelevelsWidget.dart b/lib/widgetBuilder/threelevelsWidget.dart index 91a0d66d..0ca29d26 100644 --- a/lib/widgetBuilder/threelevelsWidget.dart +++ b/lib/widgetBuilder/threelevelsWidget.dart @@ -1,21 +1,31 @@ import 'package:flutter/material.dart'; import '../constants.dart'; -class ThreeLevelWidget { - ThreeLevelWidget({ +class ThreeLevelWidget extends StatelessWidget { + ThreeLevelWidget({ @required this.labelText, @required this.numberText, @required this.customChild, }); final String labelText; final String numberText; - final Widget customChild; + final customChild; @override Widget build(BuildContext context) { return Column( mainAxisAlignment: MainAxisAlignment.center, - children: [Text(labelText, style: LabelTextStyle,), Text(numberText, style: NumberTextStyle,), customChild], + children: [ + Text( + labelText, + style: LabelTextStyle, + ), + Text( + numberText, + style: NumberTextStyle, + ), + customChild + ], ); } } From 967b7918d65269419aa8a9a373a84f2710520118 Mon Sep 17 00:00:00 2001 From: Alexis Date: Wed, 23 Dec 2020 14:00:54 -0600 Subject: [PATCH 21/34] implemented a custom flotating action button, added weight and age variables to hold the input ggiven by the user and now Im gonna implement the next screen on a new branch --- lib/pages/InputPage.dart | 31 ++++++++++++++++++++++++++---- lib/widgetBuilder/countWidget.dart | 31 ++++++++++++++++++++++++++---- 2 files changed, 54 insertions(+), 8 deletions(-) diff --git a/lib/pages/InputPage.dart b/lib/pages/InputPage.dart index 66998802..aea29129 100644 --- a/lib/pages/InputPage.dart +++ b/lib/pages/InputPage.dart @@ -138,8 +138,20 @@ class _InputPageState extends State { // had to end up building the countWidget labelText: 'WEIGHT', numberText: _weightCurrentValue.round().toString(), - customChild: new CountWidget( - firstCallBack: () {}, secondCallBack: () {})), + customChild: new CountWidget(firstCallBack: () { + if (_weightCurrentValue < 200) { + print(_weightCurrentValue); + setState(() { + _weightCurrentValue++; + }); + } + }, secondCallBack: () { + if (_weightCurrentValue > 0) { + setState(() { + _weightCurrentValue--; + }); + } + })), )), Expanded( child: new DarkContainer( @@ -147,8 +159,19 @@ class _InputPageState extends State { cardChild: new ThreeLevelWidget( labelText: 'AGE', numberText: _ageCurrentValue.round().toString(), - customChild: new CountWidget( - firstCallBack: () {}, secondCallBack: () {}), + customChild: new CountWidget(firstCallBack: () { + if (_ageCurrentValue < 100) { + setState(() { + _ageCurrentValue++; + }); + } + }, secondCallBack: () { + if (_ageCurrentValue > 0) { + setState(() { + _ageCurrentValue--; + }); + } + }), ), )) ], diff --git a/lib/widgetBuilder/countWidget.dart b/lib/widgetBuilder/countWidget.dart index a6eac023..2e80db38 100644 --- a/lib/widgetBuilder/countWidget.dart +++ b/lib/widgetBuilder/countWidget.dart @@ -8,13 +8,36 @@ class CountWidget extends StatelessWidget { @override Widget build(BuildContext context) { return Row( + mainAxisAlignment: MainAxisAlignment.center, children: [ - FlatButton( - onPressed: firstCallBack, - child: Icon(Icons.add), + RoundIconButton(callBack: firstCallBack, icon: Icons.add), + SizedBox( + width: 20.0, ), - FlatButton(onPressed: secondCallBack, child: Icon(Icons.remove)) + RoundIconButton(callBack: secondCallBack, icon: Icons.remove) ], ); } } + +class RoundIconButton extends StatelessWidget { + RoundIconButton({@required this.callBack, this.icon}); + + final Function callBack; + final IconData icon; + + @override + Widget build(BuildContext context) { + return RawMaterialButton( + child: Icon(icon), + onPressed: callBack, + elevation: 6.0, + constraints: BoxConstraints.tightFor( + width: 56.0, + height: 56.0, + ), + shape: CircleBorder(), + fillColor: Color(0xFF4C4F5E), + ); + } +} From 56eba17609e60531c183528f2ee62939ebb0ae3c Mon Sep 17 00:00:00 2001 From: Alexis Date: Wed, 23 Dec 2020 14:32:18 -0600 Subject: [PATCH 22/34] added a Navigator to the container at the bottom, and created a new route for the results to been shown --- lib/pages/InputPage.dart | 9 +++++++++ lib/pages/ResultsPage.dart | 15 +++++++++++++++ 2 files changed, 24 insertions(+) create mode 100644 lib/pages/ResultsPage.dart diff --git a/lib/pages/InputPage.dart b/lib/pages/InputPage.dart index aea29129..91a7c2b6 100644 --- a/lib/pages/InputPage.dart +++ b/lib/pages/InputPage.dart @@ -6,6 +6,7 @@ import '../widgetBuilder/slider.dart'; import '../constants.dart'; import '../widgetBuilder/threelevelsWidget.dart'; import '../widgetBuilder/countWidget.dart'; +import 'ResultsPage.dart'; double _sliderCurrentValue = 130.0; double _weightCurrentValue = 50.0; @@ -178,6 +179,14 @@ class _InputPageState extends State { ), ), Container( + child: GestureDetector( + onTap: () { + Navigator.push(context, + MaterialPageRoute(builder: (context) { + return ResultsPage(); + })); + }, + child: Center(child: Text("Results"))), width: double.infinity, height: bottomContainerHeight, margin: EdgeInsets.only(top: 5.0), diff --git a/lib/pages/ResultsPage.dart b/lib/pages/ResultsPage.dart new file mode 100644 index 00000000..33a57aa9 --- /dev/null +++ b/lib/pages/ResultsPage.dart @@ -0,0 +1,15 @@ +import 'package:flutter/material.dart'; + +class ResultsPage extends StatelessWidget { + @override + Widget build(BuildContext context) { + return Scaffold( + appBar: AppBar( + title: Text("Results"), + ), + body: Center( + child: Text("Holi en resultados"), + ), + ); + } +} From a9887c1ccd60b98a4e8d86dd580cafd4edb54b9f Mon Sep 17 00:00:00 2001 From: Alexis Date: Wed, 23 Dec 2020 14:50:46 -0600 Subject: [PATCH 23/34] added named routes --- lib/main.dart | 8 +- lib/pages/InputPage.dart | 307 ++++++++++++++++++------------------- lib/pages/ResultsPage.dart | 6 +- 3 files changed, 164 insertions(+), 157 deletions(-) diff --git a/lib/main.dart b/lib/main.dart index 54763650..9e680a37 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -1,5 +1,7 @@ +import 'package:bmi_calculator/pages/ResultsPage.dart'; import 'package:flutter/material.dart'; import './pages/InputPage.dart'; +import './pages/ResultsPage.dart'; void main() => runApp(BMICalculator()); @@ -7,6 +9,11 @@ class BMICalculator extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( + initialRoute: '/', + routes: { + '/': (context) => InputPage(), + '/results': (context) => ResultsPage(), + }, debugShowCheckedModeBanner: false, theme: ThemeData.dark().copyWith( primaryColor: Color(0xFF0A0E21), @@ -21,7 +28,6 @@ class BMICalculator extends StatelessWidget { activeTrackColor: Colors.pinkAccent, thumbColor: Colors.pink[600]), indicatorColor: Colors.pinkAccent), - home: SafeArea(child: InputPage()), ); } } diff --git a/lib/pages/InputPage.dart b/lib/pages/InputPage.dart index 91a7c2b6..e153910d 100644 --- a/lib/pages/InputPage.dart +++ b/lib/pages/InputPage.dart @@ -28,172 +28,171 @@ class _InputPageState extends State { appBar: AppBar( title: Text('BMI CALCULATOR'), ), - body: Column( - children: [ - Expanded( - child: Row( - children: [ - Expanded( - child: new DarkContainer( - onPress: () { - setState(() { - selectedGender = Gender.male; - }); - }, - color: selectedGender == Gender.male - ? inactiveCardColor - : activeCardColor, - cardChild: Column( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - FontAwesomeWidget( - margin: EdgeInsets.only(bottom: 8.0), - icon: FontAwesomeIcons.mars, - size: 60.0, - textColor: Color(0xFF8D8E98), - textSize: 18.0, - iconText: 'MALE', - ), - ], - ), - )), - Expanded( - child: new DarkContainer( - onPress: () { - setState(() { - selectedGender = Gender.female; - }); - }, - color: selectedGender == Gender.female - ? inactiveCardColor - : activeCardColor, - cardChild: Column( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - FontAwesomeWidget( - margin: EdgeInsets.only(bottom: 8.0), - icon: FontAwesomeIcons.venus, - size: 60.0, - iconText: 'FEMALE', - textColor: Color(0xFF8D8E98), - textSize: 18.0, - ), - ], - ), - )) - ], - ), - ), - Expanded( - child: Row( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - Expanded( - child: new DarkContainer( + body: SafeArea( + child: Column( + children: [ + Expanded( + child: Row( + children: [ + Expanded( + child: new DarkContainer( + onPress: () { + setState(() { + selectedGender = Gender.male; + }); + }, + color: selectedGender == Gender.male + ? inactiveCardColor + : activeCardColor, cardChild: Column( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - Text( - 'HEIGHT', - style: LabelTextStyle, - ), - Row( - mainAxisAlignment: MainAxisAlignment.center, - crossAxisAlignment: CrossAxisAlignment.baseline, - textBaseline: TextBaseline.alphabetic, - children: [ - Text(_sliderCurrentValue.round().toString(), - style: NumberTextStyle), - Text( - 'cm', - style: LabelTextStyle, - ), - ], - ), - new CustomSlider( - currentValue: _sliderCurrentValue, - minValue: 120.0, - maxValue: 220.0, - onPress: (double value) { - setState(() { - _sliderCurrentValue = value; - }); - }, - ) - ]), - color: inactiveCardColor, - ), - ) - // change the DarkContainer width and height to have percentage sizes - // Solve this instead of using fixed sizes I had to use Expanded widgets - ], + mainAxisAlignment: MainAxisAlignment.center, + children: [ + FontAwesomeWidget( + margin: EdgeInsets.only(bottom: 8.0), + icon: FontAwesomeIcons.mars, + size: 60.0, + textColor: Color(0xFF8D8E98), + textSize: 18.0, + iconText: 'MALE', + ), + ], + ), + )), + Expanded( + child: new DarkContainer( + onPress: () { + setState(() { + selectedGender = Gender.female; + }); + }, + color: selectedGender == Gender.female + ? inactiveCardColor + : activeCardColor, + cardChild: Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + FontAwesomeWidget( + margin: EdgeInsets.only(bottom: 8.0), + icon: FontAwesomeIcons.venus, + size: 60.0, + iconText: 'FEMALE', + textColor: Color(0xFF8D8E98), + textSize: 18.0, + ), + ], + ), + )) + ], + ), ), - ), - Expanded( - child: Row( - children: [ - Expanded( + Expanded( + child: Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Expanded( child: new DarkContainer( - color: inactiveCardColor, - cardChild: new ThreeLevelWidget( - // had to end up building the countWidget - labelText: 'WEIGHT', - numberText: _weightCurrentValue.round().toString(), + cardChild: Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Text( + 'HEIGHT', + style: LabelTextStyle, + ), + Row( + mainAxisAlignment: MainAxisAlignment.center, + crossAxisAlignment: CrossAxisAlignment.baseline, + textBaseline: TextBaseline.alphabetic, + children: [ + Text(_sliderCurrentValue.round().toString(), + style: NumberTextStyle), + Text( + 'cm', + style: LabelTextStyle, + ), + ], + ), + new CustomSlider( + currentValue: _sliderCurrentValue, + minValue: 120.0, + maxValue: 220.0, + onPress: (double value) { + setState(() { + _sliderCurrentValue = value; + }); + }, + ) + ]), + color: inactiveCardColor, + ), + ) + // change the DarkContainer width and height to have percentage sizes + // Solve this instead of using fixed sizes I had to use Expanded widgets + ], + ), + ), + Expanded( + child: Row( + children: [ + Expanded( + child: new DarkContainer( + color: inactiveCardColor, + cardChild: new ThreeLevelWidget( + // had to end up building the countWidget + labelText: 'WEIGHT', + numberText: _weightCurrentValue.round().toString(), + customChild: new CountWidget(firstCallBack: () { + if (_weightCurrentValue < 200) { + print(_weightCurrentValue); + setState(() { + _weightCurrentValue++; + }); + } + }, secondCallBack: () { + if (_weightCurrentValue > 0) { + setState(() { + _weightCurrentValue--; + }); + } + })), + )), + Expanded( + child: new DarkContainer( + color: inactiveCardColor, + cardChild: new ThreeLevelWidget( + labelText: 'AGE', + numberText: _ageCurrentValue.round().toString(), customChild: new CountWidget(firstCallBack: () { - if (_weightCurrentValue < 200) { - print(_weightCurrentValue); + if (_ageCurrentValue < 100) { setState(() { - _weightCurrentValue++; + _ageCurrentValue++; }); } }, secondCallBack: () { - if (_weightCurrentValue > 0) { + if (_ageCurrentValue > 0) { setState(() { - _weightCurrentValue--; + _ageCurrentValue--; }); } - })), - )), - Expanded( - child: new DarkContainer( - color: inactiveCardColor, - cardChild: new ThreeLevelWidget( - labelText: 'AGE', - numberText: _ageCurrentValue.round().toString(), - customChild: new CountWidget(firstCallBack: () { - if (_ageCurrentValue < 100) { - setState(() { - _ageCurrentValue++; - }); - } - }, secondCallBack: () { - if (_ageCurrentValue > 0) { - setState(() { - _ageCurrentValue--; - }); - } - }), - ), - )) - ], + }), + ), + )) + ], + ), ), - ), - Container( - child: GestureDetector( - onTap: () { - Navigator.push(context, - MaterialPageRoute(builder: (context) { - return ResultsPage(); - })); - }, - child: Center(child: Text("Results"))), - width: double.infinity, - height: bottomContainerHeight, - margin: EdgeInsets.only(top: 5.0), - decoration: BoxDecoration( - color: bottomContainerColor, - )), - ], + Container( + child: GestureDetector( + onTap: () { + Navigator.pushNamed(context, '/results'); + }, + child: Center(child: Text("Results"))), + width: double.infinity, + height: bottomContainerHeight, + margin: EdgeInsets.only(top: 5.0), + decoration: BoxDecoration( + color: bottomContainerColor, + )), + ], + ), ), ); } diff --git a/lib/pages/ResultsPage.dart b/lib/pages/ResultsPage.dart index 33a57aa9..3ecbfd67 100644 --- a/lib/pages/ResultsPage.dart +++ b/lib/pages/ResultsPage.dart @@ -7,8 +7,10 @@ class ResultsPage extends StatelessWidget { appBar: AppBar( title: Text("Results"), ), - body: Center( - child: Text("Holi en resultados"), + body: SafeArea( + child: Center( + child: Text("Holi en resultados"), + ), ), ); } From 5fd6c57f57b8977a46e5454877122373f3945c23 Mon Sep 17 00:00:00 2001 From: Alexis Date: Wed, 23 Dec 2020 18:50:04 -0600 Subject: [PATCH 24/34] styling results page --- lib/constants.dart | 2 ++ lib/pages/InputPage.dart | 6 +++++- lib/pages/ResultsPage.dart | 5 ++++- 3 files changed, 11 insertions(+), 2 deletions(-) diff --git a/lib/constants.dart b/lib/constants.dart index cfcc3003..7fca4c4d 100644 --- a/lib/constants.dart +++ b/lib/constants.dart @@ -8,3 +8,5 @@ const bottomContainerColor = Color(0xFFEB1555); const LabelTextStyle = TextStyle(fontSize: 18.0, color: Color(0xFF8D8398)); const NumberTextStyle = TextStyle(fontSize: 50.0, fontWeight: FontWeight.w900); + +const LargeButtonStyle = TextStyle(fontSize: 25.0, fontWeight: FontWeight.bold); diff --git a/lib/pages/InputPage.dart b/lib/pages/InputPage.dart index e153910d..888dc5d2 100644 --- a/lib/pages/InputPage.dart +++ b/lib/pages/InputPage.dart @@ -184,7 +184,11 @@ class _InputPageState extends State { onTap: () { Navigator.pushNamed(context, '/results'); }, - child: Center(child: Text("Results"))), + child: Center( + child: Text( + "CALCULATE", + style: LargeButtonStyle, + ))), width: double.infinity, height: bottomContainerHeight, margin: EdgeInsets.only(top: 5.0), diff --git a/lib/pages/ResultsPage.dart b/lib/pages/ResultsPage.dart index 3ecbfd67..06f96e05 100644 --- a/lib/pages/ResultsPage.dart +++ b/lib/pages/ResultsPage.dart @@ -1,4 +1,7 @@ import 'package:flutter/material.dart'; +import '../widgetBuilder/darkContainer.dart'; +import '../widgetBuilder/threelevelsWidget.dart'; + class ResultsPage extends StatelessWidget { @override @@ -9,7 +12,7 @@ class ResultsPage extends StatelessWidget { ), body: SafeArea( child: Center( - child: Text("Holi en resultados"), + child: new DarkContainer(color: null) ), ), ); From 75de538fecf7a9a9ea1e9d7f0ca3cdd61853d873 Mon Sep 17 00:00:00 2001 From: Alexis Date: Tue, 29 Dec 2020 19:01:25 -0600 Subject: [PATCH 25/34] styled the results page, now I need to add an extra parameter for the BottomButton page --- lib/constants.dart | 9 +++ lib/pages/InputPage.dart | 89 +++++++++++------------- lib/pages/ResultsPage.dart | 40 +++++++++-- lib/widgetBuilder/bottomButton.dart | 25 +++++++ lib/widgetBuilder/threelevelsWidget.dart | 2 +- 5 files changed, 111 insertions(+), 54 deletions(-) create mode 100644 lib/widgetBuilder/bottomButton.dart diff --git a/lib/constants.dart b/lib/constants.dart index 7fca4c4d..26ca6543 100644 --- a/lib/constants.dart +++ b/lib/constants.dart @@ -10,3 +10,12 @@ const LabelTextStyle = TextStyle(fontSize: 18.0, color: Color(0xFF8D8398)); const NumberTextStyle = TextStyle(fontSize: 50.0, fontWeight: FontWeight.w900); const LargeButtonStyle = TextStyle(fontSize: 25.0, fontWeight: FontWeight.bold); + +const TitleTextStyle = TextStyle(fontSize: 25.0, fontWeight: FontWeight.bold); + +const resultTextStyle = TextStyle( + color: Color(0xFF24D876), fontSize: 22.0, fontWeight: FontWeight.bold); + +const BMITextStyle = TextStyle(fontSize: 100.0, fontWeight: FontWeight.bold); + +const BMIDescriptionTextStyle = TextStyle(fontSize: 22.0); diff --git a/lib/pages/InputPage.dart b/lib/pages/InputPage.dart index 888dc5d2..3cc9d864 100644 --- a/lib/pages/InputPage.dart +++ b/lib/pages/InputPage.dart @@ -7,6 +7,7 @@ import '../constants.dart'; import '../widgetBuilder/threelevelsWidget.dart'; import '../widgetBuilder/countWidget.dart'; import 'ResultsPage.dart'; +import '../widgetBuilder/bottomButton.dart'; double _sliderCurrentValue = 130.0; double _weightCurrentValue = 50.0; @@ -130,65 +131,55 @@ class _InputPageState extends State { ], ), ), - Expanded( - child: Row( - children: [ - Expanded( - child: new DarkContainer( - color: inactiveCardColor, - cardChild: new ThreeLevelWidget( - // had to end up building the countWidget - labelText: 'WEIGHT', - numberText: _weightCurrentValue.round().toString(), - customChild: new CountWidget(firstCallBack: () { - if (_weightCurrentValue < 200) { - print(_weightCurrentValue); - setState(() { - _weightCurrentValue++; - }); - } - }, secondCallBack: () { - if (_weightCurrentValue > 0) { - setState(() { - _weightCurrentValue--; - }); - } - })), - )), - Expanded( - child: new DarkContainer( - color: inactiveCardColor, - cardChild: new ThreeLevelWidget( - labelText: 'AGE', - numberText: _ageCurrentValue.round().toString(), + Row( + children: [ + Expanded( + child: new DarkContainer( + color: inactiveCardColor, + cardChild: new ThreeLevelWidget( + // had to end up building the countWidget + labelText: 'WEIGHT', + numberText: _weightCurrentValue.round().toString(), customChild: new CountWidget(firstCallBack: () { - if (_ageCurrentValue < 100) { + if (_weightCurrentValue < 200) { + print(_weightCurrentValue); setState(() { - _ageCurrentValue++; + _weightCurrentValue++; }); } }, secondCallBack: () { - if (_ageCurrentValue > 0) { + if (_weightCurrentValue > 0) { setState(() { - _ageCurrentValue--; + _weightCurrentValue--; }); } - }), - ), - )) - ], - ), + })), + )), + Expanded( + child: new DarkContainer( + color: inactiveCardColor, + cardChild: new ThreeLevelWidget( + labelText: 'AGE', + numberText: _ageCurrentValue.round().toString(), + customChild: new CountWidget(firstCallBack: () { + if (_ageCurrentValue < 100) { + setState(() { + _ageCurrentValue++; + }); + } + }, secondCallBack: () { + if (_ageCurrentValue > 0) { + setState(() { + _ageCurrentValue--; + }); + } + }), + ), + )) + ], ), Container( - child: GestureDetector( - onTap: () { - Navigator.pushNamed(context, '/results'); - }, - child: Center( - child: Text( - "CALCULATE", - style: LargeButtonStyle, - ))), + child: BottomButton(title: "CALCULATE"), width: double.infinity, height: bottomContainerHeight, margin: EdgeInsets.only(top: 5.0), diff --git a/lib/pages/ResultsPage.dart b/lib/pages/ResultsPage.dart index 06f96e05..6e82d651 100644 --- a/lib/pages/ResultsPage.dart +++ b/lib/pages/ResultsPage.dart @@ -1,7 +1,7 @@ +import 'package:bmi_calculator/constants.dart'; import 'package:flutter/material.dart'; import '../widgetBuilder/darkContainer.dart'; -import '../widgetBuilder/threelevelsWidget.dart'; - +import '../widgetBuilder/bottomButton.dart'; class ResultsPage extends StatelessWidget { @override @@ -11,8 +11,40 @@ class ResultsPage extends StatelessWidget { title: Text("Results"), ), body: SafeArea( - child: Center( - child: new DarkContainer(color: null) + child: Column( + crossAxisAlignment: CrossAxisAlignment.stretch, + children: [ + Expanded( + child: new DarkContainer( + cardChild: Column( + mainAxisAlignment: MainAxisAlignment.spaceAround, + children: [ + Text( + "Weight label", + style: resultTextStyle, + ), + Text( + "18.3", + style: BMITextStyle, + ), + Text( + "Description", + style: BMIDescriptionTextStyle, + ) + ], + ), + color: activeCardColor, + ), + ), + Container( + child: BottomButton(title: "CALCULATE AGAIN"), + width: double.infinity, + height: bottomContainerHeight, + margin: EdgeInsets.only(top: 5.0), + decoration: BoxDecoration( + color: bottomContainerColor, + )) + ], ), ), ); diff --git a/lib/widgetBuilder/bottomButton.dart b/lib/widgetBuilder/bottomButton.dart new file mode 100644 index 00000000..ecdde6fd --- /dev/null +++ b/lib/widgetBuilder/bottomButton.dart @@ -0,0 +1,25 @@ +import 'package:flutter/material.dart'; +import '../constants.dart'; + +class BottomButton extends StatelessWidget { + const BottomButton({ + @required this.title, + //add a route parameter and a checker with a default value for it. + Key key, + }) : super(key: key); + + final String title; + + @override + Widget build(BuildContext context) { + return GestureDetector( + onTap: () { + Navigator.pushNamed(context, '/results'); + }, + child: Center( + child: Text( + title, + style: LargeButtonStyle, + ))); + } +} diff --git a/lib/widgetBuilder/threelevelsWidget.dart b/lib/widgetBuilder/threelevelsWidget.dart index 0ca29d26..bd320aee 100644 --- a/lib/widgetBuilder/threelevelsWidget.dart +++ b/lib/widgetBuilder/threelevelsWidget.dart @@ -2,7 +2,7 @@ import 'package:flutter/material.dart'; import '../constants.dart'; class ThreeLevelWidget extends StatelessWidget { - ThreeLevelWidget({ + ThreeLevelWidget({ @required this.labelText, @required this.numberText, @required this.customChild, From cf35357885f21d53dcb21c1bcc14acef5f9e78f6 Mon Sep 17 00:00:00 2001 From: Alexis Date: Tue, 29 Dec 2020 19:02:15 -0600 Subject: [PATCH 26/34] deleted an extra import not needed --- lib/pages/InputPage.dart | 1 - 1 file changed, 1 deletion(-) diff --git a/lib/pages/InputPage.dart b/lib/pages/InputPage.dart index 3cc9d864..65391a1c 100644 --- a/lib/pages/InputPage.dart +++ b/lib/pages/InputPage.dart @@ -6,7 +6,6 @@ import '../widgetBuilder/slider.dart'; import '../constants.dart'; import '../widgetBuilder/threelevelsWidget.dart'; import '../widgetBuilder/countWidget.dart'; -import 'ResultsPage.dart'; import '../widgetBuilder/bottomButton.dart'; double _sliderCurrentValue = 130.0; From 2ada50c03f4da62d61c3a02ffecb974759a8ed9d Mon Sep 17 00:00:00 2001 From: Alexis Date: Tue, 29 Dec 2020 20:56:35 -0600 Subject: [PATCH 27/34] changed the onTap functionality to Navigate to a route when the route parameter is not empty, oterwhise use Navigator por to go back to the previous screen --- lib/pages/InputPage.dart | 5 ++++- lib/widgetBuilder/bottomButton.dart | 6 +++++- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/lib/pages/InputPage.dart b/lib/pages/InputPage.dart index 65391a1c..03d5f6d4 100644 --- a/lib/pages/InputPage.dart +++ b/lib/pages/InputPage.dart @@ -178,7 +178,10 @@ class _InputPageState extends State { ], ), Container( - child: BottomButton(title: "CALCULATE"), + child: BottomButton( + title: "CALCULATE", + route: "results", + ), width: double.infinity, height: bottomContainerHeight, margin: EdgeInsets.only(top: 5.0), diff --git a/lib/widgetBuilder/bottomButton.dart b/lib/widgetBuilder/bottomButton.dart index ecdde6fd..1d0fb481 100644 --- a/lib/widgetBuilder/bottomButton.dart +++ b/lib/widgetBuilder/bottomButton.dart @@ -4,17 +4,21 @@ import '../constants.dart'; class BottomButton extends StatelessWidget { const BottomButton({ @required this.title, + this.route, //add a route parameter and a checker with a default value for it. Key key, }) : super(key: key); final String title; + final String route; @override Widget build(BuildContext context) { return GestureDetector( onTap: () { - Navigator.pushNamed(context, '/results'); + (route != null) + ? Navigator.pushNamed(context, "/$route") + : Navigator.pop(context); }, child: Center( child: Text( From 021729ffdf18d1f5ec6dc293a5d3bf080e362f0b Mon Sep 17 00:00:00 2001 From: Alexis Date: Tue, 29 Dec 2020 21:19:02 -0600 Subject: [PATCH 28/34] created the bmiCalculator class which contains the logic to calculate the BMI --- lib/logic/bmiCalculator.dart | 27 +++++++++++++++++++++++++++ lib/pages/ResultsPage.dart | 2 +- 2 files changed, 28 insertions(+), 1 deletion(-) create mode 100644 lib/logic/bmiCalculator.dart diff --git a/lib/logic/bmiCalculator.dart b/lib/logic/bmiCalculator.dart new file mode 100644 index 00000000..e0699840 --- /dev/null +++ b/lib/logic/bmiCalculator.dart @@ -0,0 +1,27 @@ +import 'dart:math'; + +class BMICalculator { + BMICalculator({this.weight, this.height}); + final double weight; + final double height; + double _bmi; + + String calculate() { + _bmi = weight / pow(height / 100, 2); + return _bmi.toStringAsFixed(1); + } + + String getBMIResult() { + if (_bmi >= 25) { + return 'Overweight'; + } else if (_bmi > 18.5) { + return 'Normal'; + } else { + return 'UnderWeight'; + } + } + + String getBMIInterpreation() { + + } +} diff --git a/lib/pages/ResultsPage.dart b/lib/pages/ResultsPage.dart index 6e82d651..2c3fabfc 100644 --- a/lib/pages/ResultsPage.dart +++ b/lib/pages/ResultsPage.dart @@ -37,7 +37,7 @@ class ResultsPage extends StatelessWidget { ), ), Container( - child: BottomButton(title: "CALCULATE AGAIN"), + child: BottomButton(title: "RE-CALCULATE"), width: double.infinity, height: bottomContainerHeight, margin: EdgeInsets.only(top: 5.0), From 84f6934ec8ba3e664d6f146843d5a429b9daff76 Mon Sep 17 00:00:00 2001 From: Alexis Date: Wed, 30 Dec 2020 09:14:21 -0600 Subject: [PATCH 29/34] changed the bottomButton to recibe a function as an argument instead of a route --- lib/logic/bmiCalculator.dart | 23 ++++++++++++++--------- lib/logic/bmiResults.dart | 7 +++++++ lib/pages/InputPage.dart | 6 +++++- lib/widgetBuilder/bottomButton.dart | 10 +++------- 4 files changed, 29 insertions(+), 17 deletions(-) create mode 100644 lib/logic/bmiResults.dart diff --git a/lib/logic/bmiCalculator.dart b/lib/logic/bmiCalculator.dart index e0699840..979e8587 100644 --- a/lib/logic/bmiCalculator.dart +++ b/lib/logic/bmiCalculator.dart @@ -1,27 +1,32 @@ import 'dart:math'; +import 'bmiResults.dart'; class BMICalculator { BMICalculator({this.weight, this.height}); final double weight; final double height; + BMIResults results; double _bmi; - String calculate() { + calculate() { _bmi = weight / pow(height / 100, 2); - return _bmi.toStringAsFixed(1); + results.bmi = _bmi.toStringAsFixed(1); } - String getBMIResult() { + BMIResults getBMIResult() { if (_bmi >= 25) { - return 'Overweight'; + results.label = 'Overweight'; + results.description = + 'You have a Higher than normal body weight. Try to excercise more'; } else if (_bmi > 18.5) { - return 'Normal'; + results.label = 'Normal'; + results.description = 'You have a normal body weight. Good job!'; } else { - return 'UnderWeight'; + results.label = 'UnderWeight'; + results.description = + 'You have a lower than normal body weight. You can eat a bit more'; } - } - - String getBMIInterpreation() { + return results; } } diff --git a/lib/logic/bmiResults.dart b/lib/logic/bmiResults.dart new file mode 100644 index 00000000..808e3841 --- /dev/null +++ b/lib/logic/bmiResults.dart @@ -0,0 +1,7 @@ +class BMIResults { + BMIResults({this.bmi, this.label, this.description}); + + String bmi; + String label; + String description; +} diff --git a/lib/pages/InputPage.dart b/lib/pages/InputPage.dart index 03d5f6d4..655633cb 100644 --- a/lib/pages/InputPage.dart +++ b/lib/pages/InputPage.dart @@ -7,6 +7,8 @@ import '../constants.dart'; import '../widgetBuilder/threelevelsWidget.dart'; import '../widgetBuilder/countWidget.dart'; import '../widgetBuilder/bottomButton.dart'; +import '../logic/bmiCalculator.dart' as BMICalculator; +import '../logic/bmiResults.dart'; double _sliderCurrentValue = 130.0; double _weightCurrentValue = 50.0; @@ -180,7 +182,9 @@ class _InputPageState extends State { Container( child: BottomButton( title: "CALCULATE", - route: "results", + onClick: () { + Navigator.pushNamed(context, '/results'); + }, ), width: double.infinity, height: bottomContainerHeight, diff --git a/lib/widgetBuilder/bottomButton.dart b/lib/widgetBuilder/bottomButton.dart index 1d0fb481..caf43a5f 100644 --- a/lib/widgetBuilder/bottomButton.dart +++ b/lib/widgetBuilder/bottomButton.dart @@ -4,22 +4,18 @@ import '../constants.dart'; class BottomButton extends StatelessWidget { const BottomButton({ @required this.title, - this.route, + this.onClick, //add a route parameter and a checker with a default value for it. Key key, }) : super(key: key); final String title; - final String route; + final Function onClick; @override Widget build(BuildContext context) { return GestureDetector( - onTap: () { - (route != null) - ? Navigator.pushNamed(context, "/$route") - : Navigator.pop(context); - }, + onTap: onClick, child: Center( child: Text( title, From 2f6624bf822ee4629447698c0e2c1095dceb5c70 Mon Sep 17 00:00:00 2001 From: Alexis Date: Thu, 31 Dec 2020 20:14:15 -0600 Subject: [PATCH 30/34] created a constructor for the results page with a default statement when the values are null --- lib/pages/InputPage.dart | 2 +- lib/pages/ResultsPage.dart | 26 ++++++++++++++++++++++---- 2 files changed, 23 insertions(+), 5 deletions(-) diff --git a/lib/pages/InputPage.dart b/lib/pages/InputPage.dart index 655633cb..b9a87aa8 100644 --- a/lib/pages/InputPage.dart +++ b/lib/pages/InputPage.dart @@ -11,7 +11,7 @@ import '../logic/bmiCalculator.dart' as BMICalculator; import '../logic/bmiResults.dart'; double _sliderCurrentValue = 130.0; -double _weightCurrentValue = 50.0; +double _weightCurrentValue = 130.0; double _ageCurrentValue = 22.0; enum Gender { male, female } Gender selectedGender; diff --git a/lib/pages/ResultsPage.dart b/lib/pages/ResultsPage.dart index 2c3fabfc..fc7463ba 100644 --- a/lib/pages/ResultsPage.dart +++ b/lib/pages/ResultsPage.dart @@ -4,6 +4,16 @@ import '../widgetBuilder/darkContainer.dart'; import '../widgetBuilder/bottomButton.dart'; class ResultsPage extends StatelessWidget { + ResultsPage({ + this.weightLabel, + this.weight, + this.weightDescription, + }); + + String weightLabel; + String weight; + String weightDescription; + @override Widget build(BuildContext context) { return Scaffold( @@ -20,15 +30,19 @@ class ResultsPage extends StatelessWidget { mainAxisAlignment: MainAxisAlignment.spaceAround, children: [ Text( - "Weight label", + (weightLabel != null) + ? weightLabel + : "No weight provided", style: resultTextStyle, ), Text( - "18.3", + (weight != null) ? weight : "N/A", style: BMITextStyle, ), Text( - "Description", + (weightDescription != null) + ? weightDescription + : "No weight provided", style: BMIDescriptionTextStyle, ) ], @@ -37,7 +51,11 @@ class ResultsPage extends StatelessWidget { ), ), Container( - child: BottomButton(title: "RE-CALCULATE"), + child: BottomButton( + title: "RE-CALCULATE", + onClick: () { + Navigator.pop(context); + }), width: double.infinity, height: bottomContainerHeight, margin: EdgeInsets.only(top: 5.0), From 36736067bba62fee2ecbaec2889b5c526927f10f Mon Sep 17 00:00:00 2001 From: Alexis Date: Thu, 31 Dec 2020 20:16:07 -0600 Subject: [PATCH 31/34] changed the default value of the description --- lib/pages/ResultsPage.dart | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/pages/ResultsPage.dart b/lib/pages/ResultsPage.dart index fc7463ba..01a96e82 100644 --- a/lib/pages/ResultsPage.dart +++ b/lib/pages/ResultsPage.dart @@ -42,7 +42,7 @@ class ResultsPage extends StatelessWidget { Text( (weightDescription != null) ? weightDescription - : "No weight provided", + : "No weight description", style: BMIDescriptionTextStyle, ) ], From 6bb9140475a45ff50acc37dd350fdd3848fa79f0 Mon Sep 17 00:00:00 2001 From: Alexis Date: Mon, 4 Jan 2021 12:16:38 -0600 Subject: [PATCH 32/34] finished the app --- lib/constants.dart | 2 +- lib/logic/bmiCalculator.dart | 31 ++++++++++++++++--------------- lib/pages/InputPage.dart | 33 +++++++++++++++++++++++++-------- lib/pages/ResultsPage.dart | 8 +++++--- 4 files changed, 47 insertions(+), 27 deletions(-) diff --git a/lib/constants.dart b/lib/constants.dart index 26ca6543..fb25ed37 100644 --- a/lib/constants.dart +++ b/lib/constants.dart @@ -18,4 +18,4 @@ const resultTextStyle = TextStyle( const BMITextStyle = TextStyle(fontSize: 100.0, fontWeight: FontWeight.bold); -const BMIDescriptionTextStyle = TextStyle(fontSize: 22.0); +const BMIDescriptionTextStyle = TextStyle(fontSize: 22.0,); diff --git a/lib/logic/bmiCalculator.dart b/lib/logic/bmiCalculator.dart index 979e8587..83ec0d44 100644 --- a/lib/logic/bmiCalculator.dart +++ b/lib/logic/bmiCalculator.dart @@ -1,32 +1,33 @@ import 'dart:math'; -import 'bmiResults.dart'; class BMICalculator { BMICalculator({this.weight, this.height}); - final double weight; - final double height; - BMIResults results; + double weight; + double height; double _bmi; calculate() { _bmi = weight / pow(height / 100, 2); - results.bmi = _bmi.toStringAsFixed(1); + return _bmi.toStringAsFixed(1); } - BMIResults getBMIResult() { + String getBMILabel() { if (_bmi >= 25) { - results.label = 'Overweight'; - results.description = - 'You have a Higher than normal body weight. Try to excercise more'; + return 'Overweight'; } else if (_bmi > 18.5) { - results.label = 'Normal'; - results.description = 'You have a normal body weight. Good job!'; + return 'Normal'; } else { - results.label = 'UnderWeight'; - results.description = - 'You have a lower than normal body weight. You can eat a bit more'; + return 'UnderWeight'; } + } - return results; + String getBMIDescription() { + if (_bmi >= 25) { + return 'You have a Higher than normal body weight. Try to excercise more'; + } else if (_bmi > 18.5) { + return 'You have a normal body weight. Good job!'; + } else { + return 'You have a lower than normal body weight. You can eat a bit more'; + } } } diff --git a/lib/pages/InputPage.dart b/lib/pages/InputPage.dart index b9a87aa8..7898d504 100644 --- a/lib/pages/InputPage.dart +++ b/lib/pages/InputPage.dart @@ -1,3 +1,4 @@ +import 'package:bmi_calculator/pages/ResultsPage.dart'; import 'package:font_awesome_flutter/font_awesome_flutter.dart'; import 'package:flutter/material.dart'; import '../widgetBuilder/darkContainer.dart'; @@ -7,11 +8,13 @@ import '../constants.dart'; import '../widgetBuilder/threelevelsWidget.dart'; import '../widgetBuilder/countWidget.dart'; import '../widgetBuilder/bottomButton.dart'; -import '../logic/bmiCalculator.dart' as BMICalculator; -import '../logic/bmiResults.dart'; +import '../logic/bmiCalculator.dart'; -double _sliderCurrentValue = 130.0; -double _weightCurrentValue = 130.0; +BMICalculator bmiCalculator = + BMICalculator(height: _heightCurrentValue, weight: _weightCurrentValue); + +double _heightCurrentValue = 184.0; +double _weightCurrentValue = 75.0; double _ageCurrentValue = 22.0; enum Gender { male, female } Gender selectedGender; @@ -105,7 +108,7 @@ class _InputPageState extends State { crossAxisAlignment: CrossAxisAlignment.baseline, textBaseline: TextBaseline.alphabetic, children: [ - Text(_sliderCurrentValue.round().toString(), + Text(_heightCurrentValue.round().toString(), style: NumberTextStyle), Text( 'cm', @@ -114,12 +117,14 @@ class _InputPageState extends State { ], ), new CustomSlider( - currentValue: _sliderCurrentValue, + currentValue: _heightCurrentValue, minValue: 120.0, maxValue: 220.0, onPress: (double value) { setState(() { - _sliderCurrentValue = value; + _heightCurrentValue = value; + bmiCalculator.height = _heightCurrentValue; + print(bmiCalculator.height); }); }, ) @@ -146,12 +151,16 @@ class _InputPageState extends State { print(_weightCurrentValue); setState(() { _weightCurrentValue++; + bmiCalculator.weight = _weightCurrentValue; + print(bmiCalculator.weight); }); } }, secondCallBack: () { if (_weightCurrentValue > 0) { setState(() { _weightCurrentValue--; + bmiCalculator.weight = _weightCurrentValue; + print(bmiCalculator.weight); }); } })), @@ -183,7 +192,15 @@ class _InputPageState extends State { child: BottomButton( title: "CALCULATE", onClick: () { - Navigator.pushNamed(context, '/results'); + Navigator.push( + context, + MaterialPageRoute( + builder: (context) => ResultsPage( + weight: bmiCalculator.calculate(), + weightLabel: bmiCalculator.getBMILabel(), + weightDescription: + bmiCalculator.getBMIDescription(), + ))); }, ), width: double.infinity, diff --git a/lib/pages/ResultsPage.dart b/lib/pages/ResultsPage.dart index 01a96e82..e5a1f89a 100644 --- a/lib/pages/ResultsPage.dart +++ b/lib/pages/ResultsPage.dart @@ -10,9 +10,9 @@ class ResultsPage extends StatelessWidget { this.weightDescription, }); - String weightLabel; - String weight; - String weightDescription; + final String weightLabel; + final String weight; + final String weightDescription; @override Widget build(BuildContext context) { @@ -28,6 +28,7 @@ class ResultsPage extends StatelessWidget { child: new DarkContainer( cardChild: Column( mainAxisAlignment: MainAxisAlignment.spaceAround, + crossAxisAlignment: CrossAxisAlignment.center, children: [ Text( (weightLabel != null) @@ -43,6 +44,7 @@ class ResultsPage extends StatelessWidget { (weightDescription != null) ? weightDescription : "No weight description", + textAlign: TextAlign.center, style: BMIDescriptionTextStyle, ) ], From b63297775c6f4a9168262f6430f83ed68042a10b Mon Sep 17 00:00:00 2001 From: Alexis Date: Mon, 4 Jan 2021 14:08:55 -0600 Subject: [PATCH 33/34] added a readme --- README.md | 53 +++++++++++++++++++++++++++++++++-------------------- 1 file changed, 33 insertions(+), 20 deletions(-) diff --git a/README.md b/README.md index f2129e3b..4eb2d518 100644 --- a/README.md +++ b/README.md @@ -1,32 +1,45 @@ -![App Brewery Banner](https://github.com/londonappbrewery/Images/blob/master/AppBreweryBanner.png) +This project is part of a series of projects to be completed by students of the [AppBrewery](https://www.appbrewery.co/p/flutter-development-bootcamp-with-dart) flutter course. -# BMI Calculator ๐Ÿ’ช -## Our Goal +## ๐Ÿงฎ The Project Brief -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. +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) +## ๐ŸŽฏ Features -## What you will create +* You can switch between English and Spanish by touching the toggle button -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. +- Add gender, age, weight and height +- Get your BMI result with a custom description. -![Finished App](https://github.com/londonappbrewery/Images/blob/master/bmi-calc-demo.gif) +## ๐Ÿงฌ Technologies & Languages Used + +- Dart +- Flutter +- Github + + +## ๐Ÿ›Ž๏ธ Contributions, Issues & Forking + +If you have any issues setting up the project or you come across any unintended bugs or problems, please do submit an issue to the [BMI Calculator](https://github.com/Psiale/bmi-calculator-flutter/issues) page. + +If you want to make your own changes, modifications or improvements to our project, go ahead and Fork it! +1. [Fork it](https://github.com/Psiale/bmi-calculator-flutter/fork) + +2. Create your working branch (git checkout -b [choose-a-name]) + +3. Commit your changes (git commit -m 'what this commit will fix/add/improve') +4. Push to the branch (git push origin [chosen-name]) +5. Create a new Pull Request -## What you will learn +## ๐ŸคŸ๐Ÿฝ๐Ÿ˜„ ๐Ÿ˜›๐Ÿค™๐Ÿพ Creator -- 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. +Alexis Sanchez +- [Github](https://github.com/Psiale) +- [Linkedin](https://www.linkedin.com/in/alexis-sanchez-dev/) ->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/) +## ๐Ÿ™Œ๐Ÿพ Show Your Support -![End Banner](https://github.com/londonappbrewery/Images/blob/master/readme-end-banner.png) +Give a โญ๏ธ if you like this project! From a7c6b0d7e6d5775717da3b5ee295893459bae677 Mon Sep 17 00:00:00 2001 From: Alexis Date: Sun, 10 Jan 2021 14:33:34 -0600 Subject: [PATCH 34/34] added mediaQuery --- lib/widgetBuilder/darkContainer.dart | 2 ++ 1 file changed, 2 insertions(+) diff --git a/lib/widgetBuilder/darkContainer.dart b/lib/widgetBuilder/darkContainer.dart index 0f0efb13..b21b55d3 100644 --- a/lib/widgetBuilder/darkContainer.dart +++ b/lib/widgetBuilder/darkContainer.dart @@ -8,6 +8,8 @@ class DarkContainer extends StatelessWidget { @override Widget build(BuildContext context) { + double height = MediaQuery.of(context).size.height; + double width = MediaQuery.of(context).size.width; return GestureDetector( onTap: onPress, child: Container(