From d4eab13982b773161f1d64ceead8cfc244e0664d Mon Sep 17 00:00:00 2001 From: devmirza121 Date: Sun, 7 Nov 2021 16:05:16 +0300 Subject: [PATCH] Health Calculator 2.0 --- lib/config/localized_values.dart | 2 +- .../bmi_calculator/bmi_calculator.dart | 556 ++-------- .../bmi_calculator/result_page.dart | 157 ++- .../bmr_calculator/bmr_calculator.dart | 342 ++++++- .../calorie_calculator.dart | 968 ++++++++---------- .../calorie_result_page.dart | 111 +- 6 files changed, 1018 insertions(+), 1118 deletions(-) diff --git a/lib/config/localized_values.dart b/lib/config/localized_values.dart index 343bd2f5..65b05d37 100644 --- a/lib/config/localized_values.dart +++ b/lib/config/localized_values.dart @@ -1149,7 +1149,7 @@ const Map localizedValues = { "triglycerides": {"en": "Triglycerides", "ar": "الدهون الثلاثية"}, "fatInBlood": {"en": "Fat in Blood", "ar": ""}, "convertFrom": {"en": "Convert from", "ar": "تحويل من"}, - "calculate": {"en": "calculate", "ar": "احسب"}, + "calculate": {"en": "Calculate", "ar": "احسب"}, "enterReadingValue": {"en": "Enter the reading value", "ar": "ادخل القيمة"}, "result": {"en": "Result", "ar": "النتيجة"}, "sort": {"en": "Sort", "ar": "فرز"}, diff --git a/lib/pages/AlHabibMedicalService/health_calculator/bmi_calculator/bmi_calculator.dart b/lib/pages/AlHabibMedicalService/health_calculator/bmi_calculator/bmi_calculator.dart index a6f8131b..c06d77db 100644 --- a/lib/pages/AlHabibMedicalService/health_calculator/bmi_calculator/bmi_calculator.dart +++ b/lib/pages/AlHabibMedicalService/health_calculator/bmi_calculator/bmi_calculator.dart @@ -1,6 +1,8 @@ import 'dart:math'; +import 'package:diplomaticquarterapp/theme/colors.dart'; import 'package:diplomaticquarterapp/uitl/translations_delegate_base.dart'; +import 'package:diplomaticquarterapp/uitl/utils_new.dart'; import 'package:diplomaticquarterapp/widgets/buttons/secondary_button.dart'; import 'package:diplomaticquarterapp/widgets/data_display/text.dart'; import 'package:diplomaticquarterapp/widgets/others/app_scaffold_widget.dart'; @@ -24,12 +26,6 @@ class _BMICalculatorState extends State { String textResult; String msg; double bmiResult; - int height = 150; - int weight = 40; - Color cmCard = activeCardColor; - Color ftCard = inactiveCardColor; - Color lbCard = inactiveCardColor; - Color kgCard = activeCardColor; TextEditingController _heightController = TextEditingController(); TextEditingController _weightController = TextEditingController(); @@ -37,53 +33,11 @@ class _BMICalculatorState extends State { List _weightPopupList = List(); List _heightPopupList = List(); - bool _isUnitML = true; - bool _isGenderMale = false; - bool _isHeightCM = false; - bool _isWeightKG = false; + bool _isHeightCM = true; + bool _isWeightKG = true; double _heightValue = 150; double _weightValue = 40; - void updateColor(int type) { - //MG/DLT card - if (type == 1) { - if (cmCard == inactiveCardColor) { - cmCard = activeCardColor; - ftCard = inactiveCardColor; - } else { - cmCard = inactiveCardColor; - } - } - if (type == 2) { - if (ftCard == inactiveCardColor) { - ftCard = activeCardColor; - cmCard = inactiveCardColor; - } else { - ftCard = inactiveCardColor; - } - } - } - - void updateColorWeight(int type) { - //MG/DLT card - if (type == 1) { - if (kgCard == inactiveCardColor) { - kgCard = activeCardColor; - lbCard = inactiveCardColor; - } else { - kgCard = inactiveCardColor; - } - } - if (type == 2) { - if (lbCard == inactiveCardColor) { - lbCard = activeCardColor; - kgCard = inactiveCardColor; - } else { - lbCard = inactiveCardColor; - } - } - } - double convertToCm(double number) { return number * 30.48; } @@ -93,10 +47,10 @@ class _BMICalculatorState extends State { } double calculateBMI() { - if (ftCard == activeCardColor) { - convertToCm(height.toDouble()); + if (_isHeightCM) { + convertToCm(_heightValue.toDouble()); } - bmiResult = weight / pow(height / 100, 2); + bmiResult = _weightValue / pow(_heightValue / 100, 2); return bmiResult; } @@ -129,13 +83,13 @@ class _BMICalculatorState extends State { void initState() { super.initState(); textController.text = '0'; // Setting the initial value for the field. - _heightValue = 100; - _weightValue = 50; + _heightValue = 100; + _weightValue = 50; _heightController.text = _heightValue.toStringAsFixed(0); _weightController.text = _weightValue.toStringAsFixed(0); _isWeightKG = true; - _isHeightCM = true; + _isHeightCM = true; } Widget build(BuildContext context) { @@ -163,410 +117,100 @@ class _BMICalculatorState extends State { ) ], appBarTitle: "${TranslationBase.of(context).bmi} ${TranslationBase.of(context).calcHealth}", - body: SingleChildScrollView( - child: Padding( - padding: const EdgeInsets.all(12.0), - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - TranslationBase.of(context).bmiCalcDesc, - style: TextStyle( - fontSize: 14.0, - letterSpacing: -0.56, - fontWeight: FontWeight.w600, - ), - ), - - _commonInputAndUnitRow( - TranslationBase.of(context).height, - _heightController, - 1, - 270, - _heightValue, - (text) { - _heightController.text = text; - }, - (value) { - _heightValue = value; - }, - _isHeightCM ? TranslationBase.of(context).cm : TranslationBase.of(context).ft, - (value) { - if (_isHeightCM != value) { - setState(() { - _isHeightCM = value; - }); - } - }, - _heightPopupList), - Container( - margin: EdgeInsets.symmetric(vertical: 8, horizontal: 16), - padding: EdgeInsets.only(bottom: 16), - decoration: BoxDecoration( - color: Colors.white, - borderRadius: BorderRadius.circular(12.0), - ), - child: Column( - children: [ - Row( - children: [ - Padding( - padding: EdgeInsets.all(8.0), - child: Texts(TranslationBase.of(context).height), - ), - ], - ), - Row( - children: [ - Padding( - padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 8.0), - child: Center( - child: Container( - width: 60.0, - foregroundDecoration: BoxDecoration( - borderRadius: BorderRadius.circular(5.0), - border: Border.all( - color: Colors.blueGrey, - width: 2.0, - ), - ), - child: Row( - children: [ - Expanded( - child: Center( - child: Text(height.toString()), - ), - ), - Container( - height: 38.0, - child: Column( - crossAxisAlignment: CrossAxisAlignment.center, - mainAxisAlignment: MainAxisAlignment.center, - children: [ - Container( - decoration: BoxDecoration( - border: Border( - bottom: BorderSide( - width: 0.5, - ), - ), - ), - child: InkWell( - child: Icon( - Icons.arrow_drop_up, - size: 18.0, - ), - onTap: () { - setState(() { - if (height < 250) height++; - }); - }, - ), - ), - InkWell( - child: Icon( - Icons.arrow_drop_down, - size: 18.0, - ), - onTap: () { - setState(() { - if (height > 120) height--; - }); - }, - ), - ], - ), - ), - ], - ), - ), - ), - ), - Slider( - value: height.toDouble(), - min: 120, - max: 250, - onChanged: (double newValue) { - setState(() { - height = newValue.round(); - }); - }, - activeColor: Color(0xffC5272D), - inactiveColor: Color(0xffF3C5C6), - ), - ], - ), - Row( - children: [ - Padding( - padding: EdgeInsets.all(8.0), - child: Texts(TranslationBase.of(context).selectUnit), - ), - ], - ), - Row( - mainAxisAlignment: MainAxisAlignment.spaceEvenly, - children: [ - GestureDetector( - onTap: () { - setState(() { - updateColor(1); - }); - }, - child: Container( - height: 55.0, - width: 150.0, - decoration: BoxDecoration( - boxShadow: [ - BoxShadow( - color: Colors.grey.withOpacity(0.5), - spreadRadius: 3, - blurRadius: 7, - offset: Offset(0, 3), // changes position of shadow - ), - ], - color: cmCard, - borderRadius: BorderRadius.circular(3.0), - ), - child: Padding( - padding: const EdgeInsets.symmetric(vertical: 0.0, horizontal: 18.0), - child: Center(child: Texts(TranslationBase.of(context).cm)), - ), - ), - ), - GestureDetector( - onTap: () { - setState(() { - updateColor(2); - }); - }, - child: Container( - height: 55.0, - width: 150.0, - decoration: BoxDecoration( - color: ftCard, - borderRadius: BorderRadius.circular(3.0), - boxShadow: [ - BoxShadow( - color: Colors.grey.withOpacity(0.5), - spreadRadius: 3, - blurRadius: 7, - offset: Offset(0, 3), // changes position of shadow - ), - ], - ), - child: Padding( - padding: const EdgeInsets.symmetric(horizontal: 16.0), - child: Center(child: Texts(TranslationBase.of(context).feet)), - ), - ), - ), - ], - ), - ], - ), - ), - SizedBox( - height: 25.0, - ), - Container( - margin: EdgeInsets.symmetric(vertical: 8, horizontal: 16), - padding: EdgeInsets.only(bottom: 16), - decoration: BoxDecoration( - color: Colors.white, - borderRadius: BorderRadius.circular(12.0), - ), - child: Column( - children: [ - Row( - children: [ - Padding( - padding: EdgeInsets.all(8.0), - child: Texts(TranslationBase.of(context).weight), - ), - ], - ), - Row( - children: [ - Padding( - padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 8.0), - child: Center( - child: Container( - width: 60.0, - foregroundDecoration: BoxDecoration( - borderRadius: BorderRadius.circular(5.0), - border: Border.all( - color: Colors.blueGrey, - width: 2.0, - ), - ), - child: Row( - children: [ - Expanded( - child: Center( - child: Text(weight.toString()), - ), - ), - Container( - height: 38.0, - child: Column( - crossAxisAlignment: CrossAxisAlignment.center, - mainAxisAlignment: MainAxisAlignment.center, - children: [ - Container( - decoration: BoxDecoration( - border: Border( - bottom: BorderSide( - width: 0.5, - ), - ), - ), - child: InkWell( - child: Icon( - Icons.arrow_drop_up, - size: 18.0, - ), - onTap: () { - setState(() { - if (weight < 250) weight++; - }); - }, - ), - ), - InkWell( - child: Icon( - Icons.arrow_drop_down, - size: 18.0, - ), - onTap: () { - setState(() { - if (weight > 40) weight--; - }); - }, - ), - ], - ), - ), - ], - ), - ), - ), - ), - Slider( - value: weight.toDouble(), - min: 40, - max: 250, - onChanged: (double newValue) { - setState(() { - weight = newValue.round(); - }); - }, - activeColor: Color(0xffC5272D), - inactiveColor: Color(0xffF3C5C6), - ), - ], - ), - Row( - children: [ - Padding( - padding: EdgeInsets.all(8.0), - child: Texts(TranslationBase.of(context).selectUnit), - ), - ], - ), - Row( - mainAxisAlignment: MainAxisAlignment.spaceEvenly, - children: [ - GestureDetector( - onTap: () { - setState(() { - updateColorWeight(1); - }); - }, - child: Container( - height: 55.0, - width: 150.0, - decoration: BoxDecoration( - boxShadow: [ - BoxShadow( - color: Colors.grey.withOpacity(0.5), - spreadRadius: 3, - blurRadius: 7, - offset: Offset(0, 3), // changes position of shadow - ), - ], - color: kgCard, - borderRadius: BorderRadius.circular(3.0), - ), - child: Padding( - padding: const EdgeInsets.symmetric(vertical: 0.0, horizontal: 18.0), - child: Center(child: Texts(TranslationBase.of(context).kg)), - ), - ), - ), - GestureDetector( - onTap: () { - setState(() { - updateColorWeight(2); - }); - }, - child: Container( - height: 55.0, - width: 150.0, - decoration: BoxDecoration( - color: lbCard, - borderRadius: BorderRadius.circular(3.0), - boxShadow: [ - BoxShadow( - color: Colors.grey.withOpacity(0.5), - spreadRadius: 3, - blurRadius: 7, - offset: Offset(0, 3), // changes position of shadow - ), - ], - ), - child: Padding( - padding: const EdgeInsets.symmetric(horizontal: 16.0), - child: Center(child: Texts(TranslationBase.of(context).pound)), - ), - ), - ), - ], + body: Column( + children: [ + Expanded( + child: Padding( + padding: const EdgeInsets.all(16.0), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + TranslationBase.of(context).bmiCalcDesc, + style: TextStyle( + fontSize: 14.0, + letterSpacing: -0.56, + fontWeight: FontWeight.w600, ), - ], - ), - ), - SizedBox( - height: 25.0, - ), - Container( - margin: EdgeInsets.symmetric(vertical: 8, horizontal: 16), - padding: EdgeInsets.symmetric(vertical: 8), - child: SecondaryButton( - label: TranslationBase.of(context).calculate, - onTap: () => { - setState(() { - calculateBMI(); - showTextResult(context); - showMsg(context); - { - Navigator.push( - context, - FadePage( - page: ResultPage( - finalResult: bmiResult, - textResult: textResult, - msg: msg, - )), - ); + ), + mHeight(24), + _commonInputAndUnitRow( + TranslationBase.of(context).height, + _heightController, + 1, + 270, + _heightValue, + (text) { + _heightController.text = text; + }, + (value) { + _heightValue = value; + }, + _isHeightCM ? TranslationBase.of(context).cm : TranslationBase.of(context).ft, + (value) { + if (_isHeightCM != value) { + setState(() { + _isHeightCM = value; + }); } - }) - }, - ), + }, + _heightPopupList, + ), + mHeight(12), + _commonInputAndUnitRow( + TranslationBase.of(context).weight, + _weightController, + 1, + 270, + _weightValue, + (text) { + _weightController.text = text; + }, + (value) { + _weightValue = value; + }, + _isWeightKG ? TranslationBase.of(context).kg : TranslationBase.of(context).pound, + (value) { + if (_isWeightKG != value) { + setState(() { + _isWeightKG = value; + }); + } + }, + _weightPopupList, + ), + ], ), - ], + ), ), - ), + Container( + color: Colors.white, + padding: EdgeInsets.all(16), + child: SecondaryButton( + label: TranslationBase.of(context).calculate, + color: CustomColors.accentColor, + onTap: () { + setState(() { + calculateBMI(); + showTextResult(context); + showMsg(context); + { + Navigator.push( + context, + FadePage( + page: ResultPage( + finalResult: bmiResult, + textResult: textResult, + msg: msg, + ), + ), + ); + } + }); + }, + ), + ), + ], ), ); } diff --git a/lib/pages/AlHabibMedicalService/health_calculator/bmi_calculator/result_page.dart b/lib/pages/AlHabibMedicalService/health_calculator/bmi_calculator/result_page.dart index 91a430ca..68126b4d 100644 --- a/lib/pages/AlHabibMedicalService/health_calculator/bmi_calculator/result_page.dart +++ b/lib/pages/AlHabibMedicalService/health_calculator/bmi_calculator/result_page.dart @@ -1,12 +1,16 @@ - +import 'package:auto_size_text/auto_size_text.dart'; import 'package:diplomaticquarterapp/config/size_config.dart'; import 'package:diplomaticquarterapp/pages/AlHabibMedicalService/health_calculator/bmi_calculator/bariatrics-screen.dart'; +import 'package:diplomaticquarterapp/theme/colors.dart'; import 'package:diplomaticquarterapp/uitl/translations_delegate_base.dart'; +import 'package:diplomaticquarterapp/uitl/utils_new.dart'; import 'package:diplomaticquarterapp/widgets/buttons/borderedButton.dart'; +import 'package:diplomaticquarterapp/widgets/buttons/secondary_button.dart'; import 'package:diplomaticquarterapp/widgets/data_display/text.dart'; import 'package:diplomaticquarterapp/widgets/others/app_scaffold_widget.dart'; import 'package:diplomaticquarterapp/widgets/transitions/fade_page.dart'; import 'package:flutter/material.dart'; +import 'package:flutter_svg/svg.dart'; import 'package:percent_indicator/percent_indicator.dart'; class ResultPage extends StatelessWidget { @@ -50,67 +54,71 @@ class ResultPage extends StatelessWidget { return AppScaffold( isShowDecPage: false, isShowAppBar: true, + showNewAppBarTitle: true, + showNewAppBar: true, appBarTitle: "${TranslationBase.of(context).bmi} ${TranslationBase.of(context).calcHealth}", body: Column( children: [ - Expanded( - child: SingleChildScrollView( + Container( + margin: EdgeInsets.only(left: 20, right: 20, top: 20, bottom: 6), + decoration: cardRadius(12), + child: Padding( + padding: const EdgeInsets.all(12.0), child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + mainAxisSize: MainAxisSize.min, children: [ - Container( - margin: EdgeInsets.only(top: 50), - child: Center( - child: CircularPercentIndicator( - radius: 220.0, - lineWidth: 20.0, - percent: percentInductor(), - center: Column( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - Text( - finalResult.toStringAsFixed(1), - style: TextStyle( - fontSize: 18.0, - fontWeight: FontWeight.bold, - ), - ), - SizedBox( - height: 5.0, - ), - Text( - textResult, - style: TextStyle( - fontSize: 16.0, - fontWeight: FontWeight.w600, - ), - ), - ], - ), - progressColor: colorInductor(), - backgroundColor: Colors.white, - ), + Text( + TranslationBase.of(context).bodyMassIndex + finalResult.toString(), + style: TextStyle( + fontSize: 16, + letterSpacing: -0.64, + fontWeight: FontWeight.w600, ), ), + mHeight(20), Container( - margin: EdgeInsets.symmetric(horizontal: 16, vertical: 16), - child: Texts(msg), + height: MediaQuery.of(context).size.width / 2.8, + child: Row( + children: [ + showMass(context, TranslationBase.of(context).underWeight, "< 18.5", finalResult <= 18.5 ? Colors.red : Colors.black, 8), + mWidth(12), + showMass(context, TranslationBase.of(context).healthy, "18.5 - 24.9", (finalResult > 18.5 && finalResult < 25) ? Colors.red : Colors.black, 6), + mWidth(12), + showMass(context, TranslationBase.of(context).overWeight, "25 - 29.9", (finalResult >= 25 && finalResult < 30) ? Colors.red : Colors.black, 4), + mWidth(12), + showMass(context, TranslationBase.of(context).obese, "30 - 34.9", (finalResult >= 30 && finalResult < 35) ? Colors.red : Colors.black, 2), + mWidth(12), + showMass(context, TranslationBase.of(context).extremeObese, "> 35", (finalResult >= 35) ? Colors.red : Colors.black, 0), + ], + ), + ), + mHeight(20), + Text( + textResult, + style: TextStyle( + fontSize: 16.0, + fontWeight: FontWeight.w600, + letterSpacing: -0.56, + ), + ), + mHeight(4), + Text( + msg, + style: TextStyle(fontSize: 14.0, fontWeight: FontWeight.w600, letterSpacing: -0.56, color: CustomColors.textColor), ), ], ), ), ), + mFlex(1), Container( - margin: EdgeInsets.symmetric(horizontal: 16, vertical: 16), - child: BorderedButton( - TranslationBase.of(context).seeListOfDoctor, - fontSize: SizeConfig.textMultiplier * 2.1, - textColor: Colors.white, - vPadding: 8, - hPadding: 8, - backgroundColor: Theme.of(context).primaryColor, - radius: 8, - fontWeight: FontWeight.bold, - handler: () { + color: Colors.white, + padding: EdgeInsets.all(16), + child: SecondaryButton( + label: TranslationBase.of(context).seeListOfDoctor, + color: CustomColors.accentColor, + onTap: () { Navigator.push( context, FadePage(page: BariatricsPage(1, 1, finalResult)), @@ -122,4 +130,57 @@ class ResultPage extends StatelessWidget { ), ); } + + Widget showMass(BuildContext context, String title, String weight, Color color, int f) { + return Expanded( + flex: 1, + child: Container( + height: double.infinity, + width: double.infinity, + child: Column( + children: [ + Flexible( + child: Row( + children: [ + mFlex(f), + Flexible( + flex: 10, + child: SvgPicture.asset( + "assets/images/new/mass/health_BMI.svg", + height: double.infinity, + width: double.infinity, + fit: BoxFit.fill, + color: color, + ), + ), + mFlex(f), + ], + ), + ), + mHeight(20), + AutoSizeText( + title, + maxLines: 1, + minFontSize: 6, + style: TextStyle( + color: color, + fontSize: 10, + letterSpacing: -0.6, + ), + ), + AutoSizeText( + weight, + maxLines: 1, + minFontSize: 6, + style: TextStyle( + color: color, + fontSize: 10, + letterSpacing: -0.6, + ), + ) + ], + ), + ), + ); + } } diff --git a/lib/pages/AlHabibMedicalService/health_calculator/bmr_calculator/bmr_calculator.dart b/lib/pages/AlHabibMedicalService/health_calculator/bmr_calculator/bmr_calculator.dart index ad35c61d..aea4d3b0 100644 --- a/lib/pages/AlHabibMedicalService/health_calculator/bmr_calculator/bmr_calculator.dart +++ b/lib/pages/AlHabibMedicalService/health_calculator/bmr_calculator/bmr_calculator.dart @@ -1,10 +1,13 @@ +import 'package:diplomaticquarterapp/theme/colors.dart'; import 'package:diplomaticquarterapp/uitl/translations_delegate_base.dart'; +import 'package:diplomaticquarterapp/uitl/utils_new.dart'; import 'package:diplomaticquarterapp/widgets/buttons/secondary_button.dart'; import 'package:diplomaticquarterapp/widgets/data_display/text.dart'; import 'package:diplomaticquarterapp/widgets/others/app_scaffold_widget.dart'; import 'package:diplomaticquarterapp/widgets/transitions/fade_page.dart'; import 'package:flutter/material.dart'; +import 'package:flutter/services.dart'; import 'bmr_result_page.dart'; @@ -145,10 +148,14 @@ class _BmrCalculatorState extends State { child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ - Padding( - padding: EdgeInsets.all(10.0), - child: Texts( - 'Calculates the amount of energy that the person’s body expends in a day'), + Text( + 'Calculates the amount of energy that the person’s body expends in a day', + style: TextStyle( + fontSize: 14, + fontWeight: FontWeight.w600, + letterSpacing: -0.56, + color: CustomColors.textColor, + ), ), Divider( thickness: 2.0, @@ -159,53 +166,85 @@ class _BmrCalculatorState extends State { Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ - Texts('Gender'), SizedBox( - height: 5.0, + height: 20, + ), + Text( + TranslationBase.of(context).selectGender, + style: TextStyle( + fontSize: 12, + fontWeight: FontWeight.w600, + letterSpacing: -0.56, + color: CustomColors.textColor, + ), + ), + SizedBox( + height: 8.0, ), Container( - width: 350, - decoration: BoxDecoration( - borderRadius: BorderRadius.circular(35.0), - color: Colors.white, - border: Border.all( - color: Colors.black45, - )), child: Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ - GestureDetector( - onTap: () { - setState(() { - updateColor(1); - isMale = false; - }); - }, - child: Container( - height: 55.0, - width: 170.0, - decoration: BoxDecoration( - color: maleCard, - borderRadius: BorderRadius.circular(35.0), + Expanded( + child: GestureDetector( + onTap: () { + setState(() { + updateColor(1); + isMale = false; + }); + }, + child: Row( + children: [ + Container( + decoration: containerColorRadiusBorderWidth(Colors.white, 1000, CustomColors.darkGreyColor, 1), + width: 24, + height: 24, + padding: EdgeInsets.all(4), + child: Container( + width: double.infinity, + height: double.infinity, + decoration: containerRadius(!isMale?CustomColors.accentColor:Colors.white, 100), + ), + ), + mWidth(12), + Text(TranslationBase.of(context).female, style: TextStyle( + fontSize: 12, + fontWeight: FontWeight.w600, + letterSpacing: -0.56, + ),), + ], ), - child: Center(child: Texts('FEMALE')), ), ), - GestureDetector( - onTap: () { - setState(() { - updateColor(2); - isMale = true; - }); - }, - child: Container( - height: 55.0, - width: 170.0, - decoration: BoxDecoration( - color: femaleCard, - borderRadius: BorderRadius.circular(35.0), + Expanded( + child: GestureDetector( + onTap: () { + setState(() { + updateColor(2); + isMale = true; + }); + }, + child: Row( + children: [ + Container( + decoration: containerColorRadiusBorderWidth(Colors.white, 1000, CustomColors.darkGreyColor, 1), + width: 24, + height: 24, + padding: EdgeInsets.all(4), + child: Container( + width: double.infinity, + height: double.infinity, + decoration: containerRadius(isMale?CustomColors.accentColor:Colors.white, 100), + ), + ), + mWidth(12), + Text(TranslationBase.of(context).male, style: TextStyle( + fontSize: 12, + fontWeight: FontWeight.w600, + letterSpacing: -0.56, + ),), + ], ), - child: Center(child: Texts('MALE')), ), ), ], @@ -734,4 +773,225 @@ class _BmrCalculatorState extends State { ), ); } + Widget inputWidget(String _labelText, String _hintText, TextEditingController _controller, {String prefix, bool isEnable = true, bool hasSelection = false}) { + return Container( + padding: EdgeInsets.only(left: 16, right: 16, bottom: 15, top: 15), + alignment: Alignment.center, + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(15), + color: Colors.white, + border: Border.all( + color: Color(0xffefefef), + width: 1, + ), + ), + child: InkWell( + onTap: hasSelection ? () {} : null, + child: Row( + children: [ + Expanded( + child: Column( + mainAxisSize: MainAxisSize.min, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + _labelText, + style: TextStyle( + fontSize: 11, + fontWeight: FontWeight.w600, + color: Color(0xff2B353E), + letterSpacing: -0.44, + ), + ), + TextField( + enabled: isEnable, + scrollPadding: EdgeInsets.zero, + keyboardType: TextInputType.number, + controller: _controller, + onChanged: (value) => {}, + style: TextStyle( + fontSize: 14, + height: 21 / 14, + fontWeight: FontWeight.w400, + color: Color(0xff2B353E), + letterSpacing: -0.44, + ), + decoration: InputDecoration( + isDense: true, + hintText: _hintText, + hintStyle: TextStyle( + fontSize: 14, + height: 21 / 14, + fontWeight: FontWeight.w400, + color: Color(0xff575757), + letterSpacing: -0.56, + ), + prefixIconConstraints: BoxConstraints(minWidth: 50), + prefixIcon: prefix == null + ? null + : Text( + "+" + prefix, + style: TextStyle( + fontSize: 14, + height: 21 / 14, + fontWeight: FontWeight.w500, + color: Color(0xff2E303A), + letterSpacing: -0.56, + ), + ), + contentPadding: EdgeInsets.zero, + border: InputBorder.none, + focusedBorder: InputBorder.none, + enabledBorder: InputBorder.none, + ), + ), + ], + ), + ), + if (hasSelection) Icon(Icons.keyboard_arrow_down_outlined), + ], + ), + ), + ); + } + + Widget _commonInputAndUnitRow(_title, _controller, double _minValue, double _maxValue, double _valueOrg, Function(String) onTextValueChange, Function(double) onValueChange, String unitTitle, + Function(bool) onUnitTap, _list) { + return Row( + children: [ + Expanded( + flex: 3, + child: Column( + mainAxisSize: MainAxisSize.min, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + _title, + style: TextStyle( + fontSize: 12, + fontWeight: FontWeight.w600, + color: Color(0xff2E303A), + letterSpacing: -0.44, + ), + ), + TextField( + controller: _controller, + keyboardType: TextInputType.number, + onChanged: (value) { + double _value = double.parse(value); + if (_value > _maxValue) { + onTextValueChange(_maxValue.toStringAsFixed(0)); + onValueChange(_maxValue); + return; + } else if (_value < _minValue) { + onTextValueChange(_minValue.toStringAsFixed(0)); + onValueChange(_minValue); + return; + } else if (_value >= _minValue && _value <= _maxValue) { + onValueChange(_value); + return; + } + }, + inputFormatters: [ + FilteringTextInputFormatter.allow(RegExp(r'[0-9]')), + ], + style: TextStyle( + color: Color(0xff575757), + letterSpacing: -0.56, + ), + decoration: InputDecoration( + isDense: true, + hintText: "0", + hintStyle: TextStyle( + fontSize: 14, + height: 21 / 14, + fontWeight: FontWeight.w400, + color: Color(0xff575757), + letterSpacing: -0.56, + ), + contentPadding: EdgeInsets.zero, + border: InputBorder.none, + focusedBorder: InputBorder.none, + enabledBorder: InputBorder.none, + ), + ), + ], + ), + ), + Container(height: 34, width: 1, color: Color(0xffE0E0E0), margin: EdgeInsets.only(left: 12, right: 12)), + Expanded( + flex: 1, + child: PopupMenuButton( + child: CommonDropDownView(TranslationBase.of(context).unit, unitTitle, null), + onSelected: (value) { + onUnitTap(value); + }, + itemBuilder: (context) => _list), + ) + ], + ).withBorderedContainer; + } +} + +// todo 'sikander' move these to separate file once usability known +class CommonDropDownView extends StatelessWidget { + final String title; + final String value; + final VoidCallback callback; + final IconData iconData; + + CommonDropDownView(this.title, this.value, this.callback, {Key key, this.iconData}) : super(key: key); + + @override + Widget build(BuildContext context) { + return InkWell( + onTap: callback, + child: Row( + children: [ + Expanded( + child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [ + Text( + title, + style: TextStyle( + fontSize: 12, + fontWeight: FontWeight.w600, + color: Color(0xff2E303A), + letterSpacing: -0.44, + ), + ), + Text( + value, + style: TextStyle( + fontSize: 14, + fontWeight: FontWeight.w400, + color: Color(0xff575757), + letterSpacing: -0.56, + ), + ), + ]), + ), + Icon( + iconData ?? Icons.keyboard_arrow_down_sharp, + color: Color(0xff2E303A), + ) + ], + ), + ); + } } + +extension BorderedContainer on Widget { + Widget get withBorderedContainer => Container( + padding: EdgeInsets.only(left: 16, right: 16, bottom: 15, top: 15), + alignment: Alignment.center, + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(15), + color: Colors.white, + border: Border.all( + color: Color(0xffefefef), + width: 1, + ), + ), + child: this, + ); +} \ No newline at end of file diff --git a/lib/pages/AlHabibMedicalService/health_calculator/calorie_calculator/calorie_calculator.dart b/lib/pages/AlHabibMedicalService/health_calculator/calorie_calculator/calorie_calculator.dart index 4e24f64a..6685a2c6 100644 --- a/lib/pages/AlHabibMedicalService/health_calculator/calorie_calculator/calorie_calculator.dart +++ b/lib/pages/AlHabibMedicalService/health_calculator/calorie_calculator/calorie_calculator.dart @@ -1,9 +1,14 @@ +import 'package:diplomaticquarterapp/core/viewModels/project_view_model.dart'; +import 'package:diplomaticquarterapp/theme/colors.dart'; import 'package:diplomaticquarterapp/uitl/translations_delegate_base.dart'; +import 'package:diplomaticquarterapp/uitl/utils_new.dart'; import 'package:diplomaticquarterapp/widgets/buttons/secondary_button.dart'; import 'package:diplomaticquarterapp/widgets/data_display/text.dart'; import 'package:diplomaticquarterapp/widgets/others/app_scaffold_widget.dart'; import 'package:diplomaticquarterapp/widgets/transitions/fade_page.dart'; import 'package:flutter/material.dart'; +import 'package:flutter/services.dart'; +import 'package:provider/provider.dart'; import 'calorie_result_page.dart'; @@ -21,13 +26,23 @@ class _CalorieCalculatorState extends State { bool isMale = false; Color maleCard = activeCardColorGender; Color femaleCard = inactiveCardColorGender; - Color kgCard = activeCardColor; - Color lbCard = inactiveCardColor; - Color cmCard = activeCardColor; - Color ftCard = inactiveCardColor; - int age = 0; - int height = 0; - int weight = 0; + + final GlobalKey clinicDropdownKey = GlobalKey(); + bool _isHeightCM = true; + bool _isWeightKG = true; + double _heightValue = 150; + double _weightValue = 40; + + TextEditingController ageController = new TextEditingController(); + TextEditingController _heightController = new TextEditingController(); + TextEditingController _weightController = TextEditingController(); + + List _heightPopupList = List(); + List _weightPopupList = List(); + + // int age = 0; + // int height = 0; + // int weight = 0; double calories; String dropdownValue; @@ -51,69 +66,32 @@ class _CalorieCalculatorState extends State { } } - void updateColorWeight(int type) { - //MG/DLT card - if (type == 1) { - if (kgCard == inactiveCardColor) { - kgCard = activeCardColor; - lbCard = inactiveCardColor; - } else { - kgCard = inactiveCardColor; - } - } - if (type == 2) { - if (lbCard == inactiveCardColor) { - lbCard = activeCardColor; - kgCard = inactiveCardColor; - } else { - lbCard = inactiveCardColor; - } - } - } - - void updateColorHeight(int type) { - //MG/DLT card - if (type == 1) { - if (cmCard == inactiveCardColor) { - cmCard = activeCardColor; - ftCard = inactiveCardColor; - } else { - cmCard = inactiveCardColor; - } - } - if (type == 2) { - if (ftCard == inactiveCardColor) { - ftCard = activeCardColor; - cmCard = inactiveCardColor; - } else { - ftCard = inactiveCardColor; - } - } - } - void calculateCalories() { if (isMale == true) { - calories = 66.5 + (13.75 * weight) + (5.003 * height) - (6.755 * age); + calories = 66.5 + (13.75 * int.parse(_weightController.text)) + (5.003 * int.parse(_heightController.text)) - (6.755 * int.parse(ageController.text)); } else if (isMale == false) { - calories = - 655.0955 + (9.5634 * weight) + (1.850 * height) - (4.676 * age); + calories = 655.0955 + (9.5634 * int.parse(_weightController.text)) + (1.850 * int.parse(_heightController.text)) - (4.676 * int.parse(ageController.text)); } } @override Widget build(BuildContext context) { + ProjectViewModel projectViewModel = Provider.of(context); + _weightPopupList = [PopupMenuItem(child: Text(TranslationBase.of(context).kg), value: true), PopupMenuItem(child: Text(TranslationBase.of(context).lb), value: false)]; + _heightPopupList = [PopupMenuItem(child: Text(TranslationBase.of(context).cm), value: true), PopupMenuItem(child: Text(TranslationBase.of(context).ft), value: false)]; + return AppScaffold( isShowAppBar: true, isShowDecPage: false, - appBarTitle: - "${TranslationBase.of(context).calories} ${TranslationBase.of(context).calcHealth}", - showHomeAppBarIcon: false, + showNewAppBar: true, + showNewAppBarTitle: true, + appBarTitle: "${TranslationBase.of(context).calories} ${TranslationBase.of(context).calcHealth}", appBarIcons: [ Padding( padding: const EdgeInsets.symmetric(horizontal: 10.0, vertical: 7.0), child: Icon( Icons.info_outline, - color: Colors.white, + color: Colors.black, ), ) ], @@ -127,23 +105,31 @@ class _CalorieCalculatorState extends State { //mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start, children: [ - Texts( + Text( TranslationBase.of(context).calorieCalcDesc, + style: TextStyle( + fontSize: 14, + fontWeight: FontWeight.w600, + letterSpacing: -0.56, + color: CustomColors.textColor, + ), ), SizedBox( - height: 8.0, + height: 20, + ), + Text( + TranslationBase.of(context).selectGender, + style: TextStyle( + fontSize: 12, + fontWeight: FontWeight.w600, + letterSpacing: -0.56, + color: CustomColors.textColor, + ), ), - Texts(TranslationBase.of(context).gender), SizedBox( height: 8.0, ), Container( - decoration: BoxDecoration( - borderRadius: BorderRadius.circular(30.0), - color: Colors.white, - border: Border.all( - color: Colors.black45, - )), child: Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ @@ -155,15 +141,29 @@ class _CalorieCalculatorState extends State { isMale = false; }); }, - child: Container( - padding: EdgeInsets.symmetric(vertical: 16), - decoration: BoxDecoration( - color: maleCard, - borderRadius: BorderRadius.circular(30.0), - ), - child: Center( - child: Texts( - TranslationBase.of(context).female)), + child: Row( + children: [ + Container( + decoration: containerColorRadiusBorderWidth(Colors.white, 1000, CustomColors.darkGreyColor, 1), + width: 24, + height: 24, + padding: EdgeInsets.all(4), + child: Container( + width: double.infinity, + height: double.infinity, + decoration: containerRadius(!isMale ? CustomColors.accentColor : Colors.white, 100), + ), + ), + mWidth(12), + Text( + TranslationBase.of(context).female, + style: TextStyle( + fontSize: 12, + fontWeight: FontWeight.w600, + letterSpacing: -0.56, + ), + ), + ], ), ), ), @@ -175,506 +175,155 @@ class _CalorieCalculatorState extends State { isMale = true; }); }, - child: Container( - padding: EdgeInsets.symmetric(vertical: 16), - decoration: BoxDecoration( - color: femaleCard, - borderRadius: BorderRadius.circular(30.0), - ), - child: Center( - child: Texts( - TranslationBase.of(context).male)), - ), - ), - ), - ], - ), - ), - SizedBox( - height: 12.0, - ), - Texts( - TranslationBase.of(context).age11_120Years, - ), - Container( - margin: - EdgeInsets.symmetric(horizontal: 4.0, vertical: 12.0), - decoration: BoxDecoration( - color: Colors.white, - ), - child: Row( - children: [ - Padding( - padding: EdgeInsets.symmetric( - vertical: 10.0, horizontal: 8.0), - child: Center( - child: Container( - width: 60, - foregroundDecoration: BoxDecoration( - borderRadius: BorderRadius.circular(5.0), - border: Border.all( - color: Colors.blueGrey, - width: 2.0, - ), - ), - child: Row( - children: [ - Expanded( - child: Padding( - padding: const EdgeInsets.all(4.0), - child: Center( - child: Text(age.toString()), - ), - ), + child: Row( + children: [ + Container( + decoration: containerColorRadiusBorderWidth(Colors.white, 1000, CustomColors.darkGreyColor, 1), + width: 24, + height: 24, + padding: EdgeInsets.all(4), + child: Container( + width: double.infinity, + height: double.infinity, + decoration: containerRadius(isMale ? CustomColors.accentColor : Colors.white, 100), ), - Container( - padding: - EdgeInsets.symmetric(horizontal: 4), - child: Column( - crossAxisAlignment: - CrossAxisAlignment.center, - mainAxisAlignment: - MainAxisAlignment.center, - children: [ - Container( - decoration: BoxDecoration( - border: Border( - bottom: BorderSide( - width: 0.5, - ), - ), - ), - child: InkWell( - child: Icon( - Icons.arrow_drop_up, - size: 18.0, - ), - onTap: () { - setState(() { - if (age < 120) age++; - }); - }, - ), - ), - InkWell( - child: Icon( - Icons.arrow_drop_down, - size: 18.0, - ), - onTap: () { - setState(() { - if (age > 0) age--; - }); - }, - ), - ], - ), - ), - ], - ), - ), - ), - ), - Expanded( - child: Slider( - value: age.toDouble(), - min: 0, - max: 120, - onChanged: (double newValue) { - setState(() { - age = newValue.round(); - }); - }, - activeColor: Color(0xffC5272D), - inactiveColor: Color(0xffF3C5C6), - ), - ), - ], - ), - ), - Texts( - TranslationBase.of(context).height, - ), - Container( - margin: - EdgeInsets.symmetric(horizontal: 4.0, vertical: 12.0), - decoration: BoxDecoration( - color: Colors.white, - ), - child: Row( - children: [ - Padding( - padding: EdgeInsets.symmetric( - vertical: 10.0, horizontal: 8.0), - child: Center( - child: Container( - width: 60.0, - foregroundDecoration: BoxDecoration( - borderRadius: BorderRadius.circular(5.0), - border: Border.all( - color: Colors.blueGrey, - width: 2.0, ), - ), - child: Row( - children: [ - Expanded( - child: Padding( - padding: const EdgeInsets.all(4.0), - child: Center( - child: Text(height.toString()), - ), - ), - ), - Container( - padding: - EdgeInsets.symmetric(horizontal: 4.0), - child: Column( - crossAxisAlignment: - CrossAxisAlignment.center, - mainAxisAlignment: - MainAxisAlignment.center, - children: [ - Container( - decoration: BoxDecoration( - border: Border( - bottom: BorderSide( - width: 0.5, - ), - ), - ), - child: InkWell( - child: Icon( - Icons.arrow_drop_up, - size: 18.0, - ), - onTap: () { - setState(() { - if (height < 250) height++; - }); - }, - ), - ), - InkWell( - child: Icon( - Icons.arrow_drop_down, - size: 18.0, - ), - onTap: () { - setState(() { - if (height > 0) height--; - }); - }, - ), - ], - ), + mWidth(12), + Text( + TranslationBase.of(context).male, + style: TextStyle( + fontSize: 12, + fontWeight: FontWeight.w600, + letterSpacing: -0.56, ), - ], - ), + ), + ], ), ), ), - Expanded( - child: Slider( - value: height.toDouble(), - min: 0, - max: 250, - onChanged: (double newValue) { - setState(() { - height = newValue.round(); - }); - }, - activeColor: Color(0xffC5272D), - inactiveColor: Color(0xffF3C5C6), - ), - ), ], ), ), - Texts( - TranslationBase.of(context).selectUnit, + SizedBox( + height: 12.0, ), + inputWidget(TranslationBase.of(context).age11_120Years, "0", ageController), SizedBox( - height: 8.0, + height: 12.0, ), - Row( - mainAxisAlignment: MainAxisAlignment.spaceEvenly, - children: [ - Expanded( - child: GestureDetector( - onTap: () { - setState(() { - updateColorHeight(1); - }); - }, - child: Container( - padding: EdgeInsets.all(12), - margin: EdgeInsets.symmetric(horizontal: 8), - decoration: BoxDecoration( - boxShadow: [ - BoxShadow( - color: Colors.grey.withOpacity(0.5), - spreadRadius: 3, - blurRadius: 7, - offset: Offset( - 0, 3), // changes position of shadow - ), - ], - color: cmCard, - borderRadius: BorderRadius.circular(3.0), - ), - child: Padding( - padding: const EdgeInsets.symmetric( - vertical: 0.0, horizontal: 18.0), - child: Center( - child: - Texts(TranslationBase.of(context).cm)), - ), - ), - ), - ), - Expanded( - child: GestureDetector( - onTap: () { - setState(() { - updateColorHeight(2); - }); - }, - child: Container( - padding: EdgeInsets.all(12), - margin: EdgeInsets.symmetric(horizontal: 8), - decoration: BoxDecoration( - color: ftCard, - borderRadius: BorderRadius.circular(3.0), - boxShadow: [ - BoxShadow( - color: Colors.grey.withOpacity(0.5), - spreadRadius: 3, - blurRadius: 7, - offset: Offset( - 0, 3), // changes position of shadow - ), - ], - ), - child: Padding( - padding: const EdgeInsets.symmetric( - horizontal: 16.0), - child: Center( - child: Texts( - TranslationBase.of(context).feet))), - ), - ), - ), - ], + _commonInputAndUnitRow( + TranslationBase.of(context).height, + _heightController, + 1, + 270, + _heightValue, + (text) { + _heightController.text = text; + }, + (value) { + _heightValue = value; + }, + _isHeightCM ? TranslationBase.of(context).cm : TranslationBase.of(context).ft, + (value) { + if (_isHeightCM != value) { + setState(() { + _isHeightCM = value; + }); + } + }, + _heightPopupList, ), SizedBox( - height: 8.0, + height: 12.0, ), - Texts( + _commonInputAndUnitRow( TranslationBase.of(context).weight, + _weightController, + 1, + 270, + _weightValue, + (text) { + _weightController.text = text; + }, + (value) { + _weightValue = value; + }, + _isWeightKG ? TranslationBase.of(context).kg : TranslationBase.of(context).pound, + (value) { + if (_isWeightKG != value) { + setState(() { + _isWeightKG = value; + }); + } + }, + _weightPopupList, ), SizedBox( - height: 5.0, + height: 12.0, ), - Container( - margin: - EdgeInsets.symmetric(horizontal: 4.0, vertical: 12.0), - decoration: BoxDecoration( - color: Colors.white, - ), - child: Row( - children: [ - Padding( - padding: EdgeInsets.symmetric( - vertical: 10.0, horizontal: 8.0), - child: Center( - child: Container( - width: 60.0, - foregroundDecoration: BoxDecoration( - borderRadius: BorderRadius.circular(5.0), - border: Border.all( - color: Colors.blueGrey, - width: 2.0, - ), - ), - child: Row( - children: [ - Expanded( - child: Center( - child: Text(weight.toString()), - ), + InkWell( + onTap: () { + // dropdownKey.currentState; + openDropdown(clinicDropdownKey); + }, + child: Container( + // width: double.infinity, + // decoration: containerRadius(Colors.white, 12), + // padding: EdgeInsets.only(left: 10, right: 10, top: 12, bottom: 12), + child: Row( + children: [ + Flexible( + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + TranslationBase.of(context).activityLevel, + style: TextStyle( + fontSize: 11, + letterSpacing: -0.44, + fontWeight: FontWeight.w600, ), - Container( - height: 38.0, - child: Column( - crossAxisAlignment: - CrossAxisAlignment.center, - mainAxisAlignment: - MainAxisAlignment.center, - children: [ - Container( - decoration: BoxDecoration( - border: Border( - bottom: BorderSide( - width: 0.5, - ), - ), - ), - child: InkWell( - child: Icon( - Icons.arrow_drop_up, - size: 18.0, - ), - onTap: () { - setState(() { - if (weight < 250) weight++; - }); - }, - ), - ), - InkWell( - child: Icon( - Icons.arrow_drop_down, - size: 18.0, - ), - onTap: () { - setState(() { - if (weight > 0) weight--; - }); - }, - ), - ], + ), + Container( + height: 18, + child: DropdownButtonHideUnderline( + child: DropdownButton( + value: dropdownValue, + icon: Icon(Icons.arrow_downward), + iconSize: 0, + elevation: 16, + isExpanded: true, + style: TextStyle(color: Colors.black87), + underline: Container( + height: 2, + color: Colors.black54, + ), + onChanged: (String newValue) { + setState(() { + dropdownValue = newValue; + }); + }, + items: [ + 'Almost Inactive(Little or no exercises)', + 'Lighty Active (1-3) days per week', + 'very Active(6-7) days per week', + 'Super Active(very hard exercises)' + ].map>((String value) { + return DropdownMenuItem( + value: value, + child: Text(value), + ); + }).toList(), ), ), - ], - ), - ), - ), - ), - Expanded( - child: Slider( - value: weight.toDouble(), - min: 0, - max: 250, - onChanged: (double newValue) { - setState(() { - weight = newValue.round(); - }); - }, - activeColor: Color(0xffC5272D), - inactiveColor: Color(0xffF3C5C6), - ), - ), - ], - ), - ), - Texts(TranslationBase.of(context).selectUnit), - SizedBox( - height: 5.0, - ), - Row( - mainAxisAlignment: MainAxisAlignment.spaceEvenly, - children: [ - Expanded( - child: GestureDetector( - onTap: () { - setState(() { - updateColorWeight(1); - }); - }, - child: Container( - padding: EdgeInsets.all(12), - margin: EdgeInsets.symmetric(horizontal: 8), - decoration: BoxDecoration( - boxShadow: [ - BoxShadow( - color: Colors.grey.withOpacity(0.5), - spreadRadius: 3, - blurRadius: 7, - offset: Offset( - 0, 3), // changes position of shadow ), ], - color: kgCard, - borderRadius: BorderRadius.circular(3.0), - ), - child: Padding( - padding: const EdgeInsets.symmetric( - vertical: 0.0, horizontal: 18.0), - child: Center( - child: - Texts(TranslationBase.of(context).kg)), ), ), - ), + Icon(Icons.keyboard_arrow_down), + ], ), - Expanded( - child: GestureDetector( - onTap: () { - setState(() { - updateColorWeight(2); - }); - }, - child: Container( - padding: EdgeInsets.all(12), - margin: EdgeInsets.symmetric(horizontal: 8), - decoration: BoxDecoration( - color: lbCard, - borderRadius: BorderRadius.circular(3.0), - boxShadow: [ - BoxShadow( - color: Colors.grey.withOpacity(0.5), - spreadRadius: 3, - blurRadius: 7, - offset: Offset( - 0, 3), // changes position of shadow - ), - ], - ), - child: Padding( - padding: const EdgeInsets.symmetric( - horizontal: 16.0), - child: Center( - child: Texts( - TranslationBase.of(context).pound)), - ), - ), - ), - ), - ], - ), - SizedBox( - height: 8.0, - ), - Texts(TranslationBase.of(context).activityLevel), - Container( - child: DropdownButton( - value: dropdownValue, - icon: Icon(Icons.arrow_downward), - iconSize: 24, - elevation: 16, - style: TextStyle(color: Colors.black87), - underline: Container( - height: 2, - color: Colors.black54, - ), - onChanged: (String newValue) { - setState(() { - dropdownValue = newValue; - }); - }, - items: [ - 'Almost Inactive(Little or no exercises)', - 'Lighty Active (1-3) days per week', - 'very Active(6-7) days per week', - 'Super Active(very hard exercises)' - ].map>((String value) { - return DropdownMenuItem( - value: value, - child: Text(value), - ); - }).toList(), - ), + ).withBorderedContainer, ), SizedBox( height: 25.0, @@ -686,8 +335,10 @@ class _CalorieCalculatorState extends State { ), Container( margin: EdgeInsets.symmetric(horizontal: 16.0, vertical: 16.0), + color: Colors.white, child: SecondaryButton( label: TranslationBase.of(context).calculate, + color: CustomColors.accentColor, onTap: () { setState(() { calculateCalories(); @@ -709,4 +360,231 @@ class _CalorieCalculatorState extends State { ), ); } + + void openDropdown(GlobalKey key) { + GestureDetector detector; + void searchForGestureDetector(BuildContext element) { + element.visitChildElements((element) { + if (element.widget != null && element.widget is GestureDetector) { + detector = element.widget; + return false; + } else { + searchForGestureDetector(element); + } + + return true; + }); + } + + searchForGestureDetector(key.currentContext); + assert(detector != null); + + detector.onTap(); + } + + Widget inputWidget(String _labelText, String _hintText, TextEditingController _controller, {String prefix, bool isEnable = true, bool hasSelection = false}) { + return Container( + padding: EdgeInsets.only(left: 16, right: 16, bottom: 15, top: 15), + alignment: Alignment.center, + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(15), + color: Colors.white, + border: Border.all( + color: Color(0xffefefef), + width: 1, + ), + ), + child: InkWell( + onTap: hasSelection ? () {} : null, + child: Row( + children: [ + Expanded( + child: Column( + mainAxisSize: MainAxisSize.min, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + _labelText, + style: TextStyle( + fontSize: 11, + fontWeight: FontWeight.w600, + color: Color(0xff2B353E), + letterSpacing: -0.44, + ), + ), + TextField( + enabled: isEnable, + scrollPadding: EdgeInsets.zero, + keyboardType: TextInputType.number, + controller: _controller, + onChanged: (value) => {}, + style: TextStyle( + fontSize: 14, + height: 21 / 14, + fontWeight: FontWeight.w400, + color: Color(0xff2B353E), + letterSpacing: -0.44, + ), + decoration: InputDecoration( + isDense: true, + hintText: _hintText, + hintStyle: TextStyle( + fontSize: 14, + height: 21 / 14, + fontWeight: FontWeight.w400, + color: Color(0xff575757), + letterSpacing: -0.56, + ), + prefixIconConstraints: BoxConstraints(minWidth: 50), + prefixIcon: prefix == null + ? null + : Text( + "+" + prefix, + style: TextStyle( + fontSize: 14, + height: 21 / 14, + fontWeight: FontWeight.w500, + color: Color(0xff2E303A), + letterSpacing: -0.56, + ), + ), + contentPadding: EdgeInsets.zero, + border: InputBorder.none, + focusedBorder: InputBorder.none, + enabledBorder: InputBorder.none, + ), + ), + ], + ), + ), + if (hasSelection) Icon(Icons.keyboard_arrow_down_outlined), + ], + ), + ), + ); + } + + Widget _commonInputAndUnitRow(_title, _controller, double _minValue, double _maxValue, double _valueOrg, Function(String) onTextValueChange, Function(double) onValueChange, String unitTitle, + Function(bool) onUnitTap, _list) { + return Row( + children: [ + Expanded( + flex: 3, + child: Column( + mainAxisSize: MainAxisSize.min, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + _title, + style: TextStyle( + fontSize: 12, + fontWeight: FontWeight.w600, + color: Color(0xff2E303A), + letterSpacing: -0.44, + ), + ), + TextField( + controller: _controller, + keyboardType: TextInputType.number, + onChanged: (value) { + double _value = double.parse(value); + if (_value > _maxValue) { + onTextValueChange(_maxValue.toStringAsFixed(0)); + onValueChange(_maxValue); + return; + } else if (_value < _minValue) { + onTextValueChange(_minValue.toStringAsFixed(0)); + onValueChange(_minValue); + return; + } else if (_value >= _minValue && _value <= _maxValue) { + onValueChange(_value); + return; + } + }, + inputFormatters: [ + FilteringTextInputFormatter.allow(RegExp(r'[0-9]')), + ], + style: TextStyle( + color: Color(0xff575757), + letterSpacing: -0.56, + ), + decoration: InputDecoration( + isDense: true, + hintText: "0", + hintStyle: TextStyle( + fontSize: 14, + height: 21 / 14, + fontWeight: FontWeight.w400, + color: Color(0xff575757), + letterSpacing: -0.56, + ), + contentPadding: EdgeInsets.zero, + border: InputBorder.none, + focusedBorder: InputBorder.none, + enabledBorder: InputBorder.none, + ), + ), + ], + ), + ), + Container(height: 34, width: 1, color: Color(0xffE0E0E0), margin: EdgeInsets.only(left: 12, right: 12)), + Expanded( + flex: 1, + child: PopupMenuButton( + child: CommonDropDownView(TranslationBase.of(context).unit, unitTitle, null), + onSelected: (value) { + onUnitTap(value); + }, + itemBuilder: (context) => _list), + ) + ], + ).withBorderedContainer; + } +} + +// todo 'sikander' move these to separate file once usability known +class CommonDropDownView extends StatelessWidget { + final String title; + final String value; + final VoidCallback callback; + final IconData iconData; + + CommonDropDownView(this.title, this.value, this.callback, {Key key, this.iconData}) : super(key: key); + + @override + Widget build(BuildContext context) { + return InkWell( + onTap: callback, + child: Row( + children: [ + Expanded( + child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [ + Text( + title, + style: TextStyle( + fontSize: 12, + fontWeight: FontWeight.w600, + color: Color(0xff2E303A), + letterSpacing: -0.44, + ), + ), + Text( + value, + style: TextStyle( + fontSize: 14, + fontWeight: FontWeight.w400, + color: Color(0xff575757), + letterSpacing: -0.56, + ), + ), + ]), + ), + Icon( + iconData ?? Icons.keyboard_arrow_down_sharp, + color: Color(0xff2E303A), + ) + ], + ), + ); + } } diff --git a/lib/pages/AlHabibMedicalService/health_calculator/calorie_calculator/calorie_result_page.dart b/lib/pages/AlHabibMedicalService/health_calculator/calorie_calculator/calorie_result_page.dart index 749bf241..dc27e051 100644 --- a/lib/pages/AlHabibMedicalService/health_calculator/calorie_calculator/calorie_result_page.dart +++ b/lib/pages/AlHabibMedicalService/health_calculator/calorie_calculator/calorie_result_page.dart @@ -1,9 +1,12 @@ import 'package:diplomaticquarterapp/core/service/AlHabibMedicalService/health-calculator/bariatrics-service.dart'; import 'package:diplomaticquarterapp/models/Appointments/DoctorListResponse.dart'; import 'package:diplomaticquarterapp/pages/BookAppointment/SearchResults.dart'; +import 'package:diplomaticquarterapp/theme/colors.dart'; import 'package:diplomaticquarterapp/uitl/gif_loader_dialog_utils.dart'; import 'package:diplomaticquarterapp/uitl/translations_delegate_base.dart'; +import 'package:diplomaticquarterapp/uitl/utils_new.dart'; import 'package:diplomaticquarterapp/widgets/buttons/button.dart'; +import 'package:diplomaticquarterapp/widgets/buttons/secondary_button.dart'; import 'package:diplomaticquarterapp/widgets/data_display/text.dart'; import 'package:diplomaticquarterapp/widgets/others/app_scaffold_widget.dart'; import 'package:diplomaticquarterapp/widgets/transitions/fade_page.dart'; @@ -24,45 +27,83 @@ class CalorieResultPage extends StatelessWidget { showNewAppBarTitle: true, showNewAppBar: true, body: Column( - mainAxisAlignment: MainAxisAlignment.spaceEvenly, + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, children: [ - Center( - child: CircularPercentIndicator( - radius: 220.0, - lineWidth: 20.0, - percent: ((this.calorie > 3500) ? 100 : this.calorie / 3500), - center: Column( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - Text( - calorie.toStringAsFixed(1), - style: TextStyle( - fontSize: 18.0, - fontWeight: FontWeight.bold, + Padding( + padding: const EdgeInsets.all(20.0), + child: Column( + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + "Calories", + style: TextStyle( + fontSize: 19, + letterSpacing: -1.34, + fontWeight: FontWeight.bold, + ), + ), + mHeight(20), + Center( + child: CircularPercentIndicator( + radius: 220.0, + lineWidth: 3.0, + percent: ((this.calorie > 3500) ? 100 : this.calorie / 3500), + center: Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Text( + calorie.toStringAsFixed(1), + style: TextStyle( + fontSize: 17, + letterSpacing: -1.02, + fontWeight: FontWeight.w600, + ), + ), + SizedBox( + height: 5.0, + ), + Text( + 'Calories', + style: TextStyle( + fontSize: 18, + letterSpacing: -1.08, + fontWeight: FontWeight.w600, + ), + ), + ], ), + progressColor: CustomColors.accentColor, + backgroundColor: Colors.white, ), - SizedBox( - height: 5.0, + ), + mHeight(20), + Text( + 'Daily intake is ${calorie.toStringAsFixed(1)} calories', + style: TextStyle( + fontSize: 14, + letterSpacing: -0.56, + fontWeight: FontWeight.w600, + color: CustomColors.textColor ), - Texts('Calories'), - ], - ), - progressColor: Color(0xff3C3939), - backgroundColor: Colors.white, - ), - ), - Container( - child: Texts('Daily intake is ${calorie.toStringAsFixed(1)} calories'), + ), + ], + ).withBorderedContainer, ), + mFlex(1), Container( - width: 350, - child: Button( + margin: EdgeInsets.symmetric(horizontal: 16.0, vertical: 16.0), + color: Colors.white, + child: SecondaryButton( label: TranslationBase.of(context).viewDocList, + color: CustomColors.accentColor, onTap: () { getDoctorsList(context); }, ), ), + ], ), ); @@ -121,3 +162,19 @@ class CalorieResultPage extends StatelessWidget { }); } } + +extension BorderedContainer on Widget { + Widget get withBorderedContainer => Container( + padding: EdgeInsets.only(left: 16, right: 16, bottom: 15, top: 15), + alignment: Alignment.center, + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(15), + color: Colors.white, + border: Border.all( + color: Color(0xffefefef), + width: 1, + ), + ), + child: this, + ); +}