From 55df00dcd47336ff36ae2335357fa9e461844328 Mon Sep 17 00:00:00 2001 From: Sikander Saleem Date: Sun, 10 Oct 2021 17:39:23 +0300 Subject: [PATCH] h20 today ui (cont.) --- lib/config/localized_values.dart | 4 +- .../h2o/h20_setting.dart | 121 +----- .../AlHabibMedicalService/h2o/today_page.dart | 345 +++++++++++------- lib/uitl/translations_delegate_base.dart | 4 + pubspec.yaml | 1 + 5 files changed, 240 insertions(+), 235 deletions(-) diff --git a/lib/config/localized_values.dart b/lib/config/localized_values.dart index 05f60cd6..57051ab7 100644 --- a/lib/config/localized_values.dart +++ b/lib/config/localized_values.dart @@ -610,7 +610,7 @@ const Map localizedValues = { "inactive": {"en": "INACTIVE", "ar": "غير فعال"}, "balance": {"en": "BALANCE", "ar": "الحالي"}, "gained": {"en": "GAINED", "ar": "المكتسب"}, - "consumed": {"en": "CONSUMED", "ar": "المستهلك"}, + "consumed": {"en": "Consumed", "ar": "المستهلك"}, "transferred": {"en": "TRANSFERRED", "ar": "المحول"}, "checkBeneficiary": {"en": "CHECK BENEFICIARY", "ar": "تحقق من المستفيد"}, "beneficiaryName": {"en": "Beneficiary Name", "ar": "اسم المستفيد"}, @@ -1282,6 +1282,8 @@ const Map localizedValues = { "undo": {"en": "Undo", "ar": "تراجع"}, "drinking": {"en": "Drinkning", "ar": "الشرب"}, "remaining": {"en": "Remaining", "ar": "المتبقي"}, + "addCustomAmount": {"en": "Add Custom Amount", "ar": "إضافة مبلغ مخصص"}, + "left": {"en": "Left", "ar": "المتبقي"}, "taken": {"en": "Taken", "ar": " مأخوذ"}, "ml": {"en": "ML", "ar": "مل"}, "mililitre": {"en": "Mililitre (ml)", "ar": "مليلتر (مل)"}, diff --git a/lib/pages/AlHabibMedicalService/h2o/h20_setting.dart b/lib/pages/AlHabibMedicalService/h2o/h20_setting.dart index 84d3f13b..2221ea5c 100644 --- a/lib/pages/AlHabibMedicalService/h2o/h20_setting.dart +++ b/lib/pages/AlHabibMedicalService/h2o/h20_setting.dart @@ -282,9 +282,20 @@ class _H2oSettingState extends State { ); }), ), + SizedBox(height: 18), + Text( + TranslationBase.of(context).reminderLabel, + style: TextStyle( + fontSize: 14, + height: 21 / 14, + fontWeight: FontWeight.w600, + color: Color(0xff2B353E), + letterSpacing: -0.44, + ), + ), SizedBox(height: 12), _containerWidget( - _commonDropDownView(TranslationBase.of(context).reminderLabel, _remindedTimeListEng[_selectedRemindedTime], () { + _commonDropDownView(TranslationBase.of(context).reminderTimesLabel, _remindedTimeListEng[_selectedRemindedTime], () { showDialog( context: context, child: CommonRadioButtonDialog( @@ -593,114 +604,6 @@ class _H2oSettingState extends State { ); } - Widget _commonSlidersRow(_title, _controller, double _minValue, double _maxValue, double _valueOrg, Function(String) onTextValueChange, Function(double) onValueChange) { - // if (_valueOrg < 174) { - // return _containerWidget(Row( - // children: [ - // Expanded(flex: 3, child: inputWidget(_title, "$_valueOrg", _controller)), - // Container(height: 34,width: 1,color:Color(0xffE0E0E0),margin: EdgeInsets.only(left: 12,right: 12)), - // Expanded( - // flex: 1, - // child: _commonDropDownView(TranslationBase.of(context).unit, _isWeightKG ? TranslationBase.of(context).kg : TranslationBase.of(context).lb, () {}), - // ) - // ], - // )); - // } - - return Container( - margin: EdgeInsets.only(top: 6), - padding: EdgeInsets.all(6), - color: Colors.white, - height: 50, - child: Row( - children: [ - SizedBox( - width: 75, - child: TextField( - controller: _controller, - textAlign: TextAlign.center, - 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]')), - ], - decoration: InputDecoration( - contentPadding: EdgeInsets.only(left: 4, right: 4), - fillColor: Colors.white, - filled: true, - focusedBorder: OutlineInputBorder( - borderSide: BorderSide( - width: 1, - color: Colors.grey, - style: BorderStyle.solid, - ), - borderRadius: BorderRadius.circular(6.0), - ), - enabledBorder: OutlineInputBorder( - borderSide: BorderSide( - width: 1, - color: Colors.grey, - style: BorderStyle.solid, - ), - borderRadius: BorderRadius.circular(6.0), - ), - ), - ), - ), - Expanded( - flex: 6, - child: Slider( - min: _minValue, - max: _maxValue, - activeColor: Colors.redAccent, - inactiveColor: Colors.redAccent.withOpacity(.3), - value: _valueOrg, - onChanged: (value) { - onTextValueChange(value.toStringAsFixed(0)); - onValueChange(value); - }, - ), - ) - ], - ), - ); - } - - Widget _commonDialogSelectorRow(String title, String selectedText, VoidCallback onPressed) { - return Column(crossAxisAlignment: CrossAxisAlignment.start, mainAxisSize: MainAxisSize.min, children: [ - Text(title), - SizedBox(height: 8), - InkWell( - onTap: onPressed, - child: Container( - height: 50, - padding: EdgeInsets.all(8), - width: MediaQuery.of(context).size.width, - decoration: BoxDecoration(borderRadius: BorderRadius.circular(8), color: Colors.white), - child: Row( - crossAxisAlignment: CrossAxisAlignment.center, - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [Text(selectedText), Icon(Icons.arrow_drop_down_outlined)], - ), - ), - ) - ]); - } - void _updateUserDetails() async { _userDetailModel.height = _heightValue; _userDetailModel.weight = _weightValue; diff --git a/lib/pages/AlHabibMedicalService/h2o/today_page.dart b/lib/pages/AlHabibMedicalService/h2o/today_page.dart index 1a5105a0..f60aee92 100644 --- a/lib/pages/AlHabibMedicalService/h2o/today_page.dart +++ b/lib/pages/AlHabibMedicalService/h2o/today_page.dart @@ -2,15 +2,23 @@ import 'package:diplomaticquarterapp/config/shared_pref_kay.dart'; import 'package:diplomaticquarterapp/core/viewModels/AlHabibMedicalService/H2O_view_model.dart'; import 'package:diplomaticquarterapp/pages/AlHabibMedicalService/h2o/widgets/h20_floating_action_button.dart'; import 'package:diplomaticquarterapp/pages/base/base_view.dart'; +import 'package:diplomaticquarterapp/uitl/gif_loader_dialog_utils.dart'; import 'package:diplomaticquarterapp/uitl/translations_delegate_base.dart'; import 'package:diplomaticquarterapp/widgets/others/app_scaffold_widget.dart'; +import 'package:diplomaticquarterapp/widgets/transitions/fade_page.dart'; import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:hexcolor/hexcolor.dart'; import 'package:percent_indicator/circular_percent_indicator.dart'; import 'package:shared_preferences/shared_preferences.dart'; +import 'package:wave/config.dart'; +import 'package:wave/wave.dart'; + +import 'Dialog/confirm_add_amount_dialog.dart'; +import 'add_custom_amount.dart'; class TodayPage extends StatelessWidget { + Future readPrefs() async { SharedPreferences prefs = await SharedPreferences.getInstance(); return (prefs.getString(H2O_UNIT) ?? "ml") == "ml" ? true : false; @@ -25,143 +33,159 @@ class TodayPage extends StatelessWidget { appBarTitle: TranslationBase.of(context).h2o, baseViewModel: model, body: SingleChildScrollView( + physics: BouncingScrollPhysics(), padding: EdgeInsets.all(21), child: Column( + crossAxisAlignment: CrossAxisAlignment.start, children: [ + SizedBox( + height: 320, + child: Row( + children: [ + Expanded( + child: FutureBuilder( + future: readPrefs(), + builder: (context, data) { + var isUnitML = true; + String unit; + if (data.connectionState == ConnectionState.done) { + isUnitML = data.data; + } + if (isUnitML) { + unit = TranslationBase.of(context).ml; + } else { + unit = TranslationBase.of(context).l; + } + unit = unit.toLowerCase(); + double totalH2O = model?.userProgressData?.quantityLimit ?? 0.0; + double consumedH2O = model?.userProgressData?.quantityConsumed ?? 0.0; + if (!isUnitML) { + totalH2O = totalH2O / 1000; + consumedH2O = consumedH2O / 1000; + } + if (consumedH2O > totalH2O) { + consumedH2O = totalH2O; + } - Center( - child: CircularPercentIndicator( - radius: 180.0, - animation: true, - animationDuration: 1200, - lineWidth: 15.0, - percent: model.userProgressData == null - ? 0.0 - : (model.userProgressData.percentageConsumed / 100) >= 1 - ? 1 - : (model.userProgressData.percentageConsumed / 100), - center: Center( - child: FutureBuilder( - future: readPrefs(), - builder: (context, data) { - var isUnitML = true; - String unit; - if (data.connectionState == ConnectionState.done) { - isUnitML = data.data; - } - if (isUnitML) { - unit = TranslationBase.of(context).ml; - } else { - unit = TranslationBase.of(context).l; - } - unit = unit.toLowerCase(); - var totalH2O = model?.userProgressData?.quantityLimit ?? 0.0; - var consumedH2O = model?.userProgressData?.quantityConsumed ?? 0.0; - if (!isUnitML) { - totalH2O = totalH2O / 1000; - consumedH2O = consumedH2O / 1000; - } - var remainingH2O = totalH2O - consumedH2O; + double divide = consumedH2O / totalH2O; + String percentage = (divide * 100).toStringAsFixed(0); + var remainingH2O = totalH2O - consumedH2O; - return Column( - mainAxisSize: MainAxisSize.min, - children: [ - // SizedBox( - // height: 40, - // ), - Text( - TranslationBase.of(context).consumed, - style: TextStyle(fontSize: 16.0), - ), - SizedBox( - height: 4, - ), - Text( - model.userProgressData == null ? "0.0" : "$consumedH2O $unit", - style: TextStyle(fontWeight: FontWeight.bold, fontSize: 14.0, color: HexColor("#60BCF9")), - ), - SizedBox( - height: 4, - ), - SizedBox( - height: 5, - width: 50, - child: Container(), - ), - SizedBox( - height: 4, - ), - Text( - TranslationBase.of(context).remaining, - style: TextStyle(fontSize: 16.0), + return AspectRatio( + aspectRatio: 234 / 320, + child: Stack( + alignment: Alignment.center, + children: [ + ClipRRect( + borderRadius: BorderRadius.circular(18), + child: WaveWidget( + config: CustomConfig( + colors: [Color(0xff0d47a1), Color(0xff1976d2), Color(0xff2196f3)], + durations: [19440, 10800, 6000], + heightPercentages: [1 - divide - .10, 1 - divide - .05, 1 - divide], + blur: MaskFilter.blur(BlurStyle.solid, 0), + ), + waveAmplitude: 0, + backgroundColor: Color(0xff2e303a), + size: Size( + double.infinity, + double.infinity, + ), + ), + ), + Padding( + padding: const EdgeInsets.only(top: 12, bottom: 12), + child: Column( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Text( + remainingH2O.toStringAsFixed(0) + "$unit " + TranslationBase.of(context).left.toLowerCase(), + style: TextStyle( + fontSize: 14, + fontWeight: FontWeight.w600, + color: Colors.white, + letterSpacing: -0.56, + ), + ), + Column( + mainAxisSize: MainAxisSize.min, + children: [ + Text( + "$percentage%", + style: TextStyle( + fontSize: 34, + fontWeight: FontWeight.bold, + color: Colors.white, + letterSpacing: -2.34, + ), + ), + Text( + TranslationBase.of(context).consumed, + style: TextStyle( + fontSize: 14, + fontWeight: FontWeight.w600, + color: Colors.white, + letterSpacing: -0.56, + ), + ), + ], + ), + ], + ), + ) + ], ), - SizedBox( - height: 4, - ), - Text( - model.userProgressData == null - ? "0.0" - : (remainingH2O) < 0 - ? "0 $unit" - : '$remainingH2O $unit', - style: TextStyle(fontWeight: FontWeight.bold, fontSize: 14.0), - ), - ], - ); - }, - ), - ), - circularStrokeCap: CircularStrokeCap.butt, - backgroundColor: HexColor("#D1E3F6"), - progressColor: HexColor("#60BCF9"), - ), - ), - Row( - mainAxisAlignment: MainAxisAlignment.spaceAround, - children: [ - Column( - crossAxisAlignment: CrossAxisAlignment.center, - children: [ - Container( - margin: EdgeInsets.only(bottom: 16), - height: 30, - width: 70, - decoration: BoxDecoration(color: HexColor("#D1E3F6"), borderRadius: BorderRadius.all(Radius.circular(30))), + ); + }, ), - Text( - "${TranslationBase.of(context).remaining} %", - style: TextStyle(fontSize: 16.0), - ) - ], - ), - Column( - crossAxisAlignment: CrossAxisAlignment.center, - children: [ - Container( - margin: EdgeInsets.only(bottom: 16), - height: 30, - width: 70, - decoration: BoxDecoration(color: HexColor("#60BCF9"), borderRadius: BorderRadius.all(Radius.circular(30))), + ), + SizedBox(width: 21), + SizedBox( + height: double.infinity, + child: Column( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + _circularButton(context, 600, model), + SizedBox(height: 8), + _circularButton(context, 330, model), + SizedBox(height: 8), + _circularButton(context, 200, model), + // SizedBox(height: 8), + // _circularButton(context, 0, model, isCustom: true), + SizedBox(height: 8), + InkWell( + onTap: () => undoVolume(context, model), + child: Text( + TranslationBase.of(context).undo, + style: TextStyle( + fontSize: 14, + fontWeight: FontWeight.w600, + color: Color(0xffD02127), + letterSpacing: -0.56, + decoration: TextDecoration.underline, + ), + ), + ), + ], ), - Text( - "${TranslationBase.of(context).consumed} %", - style: TextStyle(fontSize: 16.0), - ) - ], - ) - ], - ), - SizedBox( - height: 30, + ) + ], + ), ), - SizedBox( - height: 0.5, - width: MediaQuery.of(context).size.width, - child: Container( - color: Colors.grey, + SizedBox(height: 40), + Text( + TranslationBase.of(context).addCustomAmount, + style: TextStyle( + fontSize: 14, + height: 21 / 14, + fontWeight: FontWeight.w600, + color: Color(0xff2B353E), + letterSpacing: -0.56, ), ), + ], ), ), @@ -172,4 +196,75 @@ class TodayPage extends StatelessWidget { ), ); } + + Widget _circularButton(context, int value, model, {bool isCustom = false}) { + String _text = "$value${TranslationBase.of(context).ml}"; + if (isCustom) { + _text = TranslationBase.of(context).custom; + } + return InkWell( + onTap: () { + if (isCustom) { + Navigator.push( + context, + FadePage( + page: AddCustomAmount( + model: model, + ), + ), + ); + } else { + showConfirmMessage(context, value, model); + } + }, + child: Container( + padding: EdgeInsets.all(21), + alignment: Alignment.center, + decoration: BoxDecoration( + color: Colors.white, + shape: BoxShape.circle, + border: Border.all(width: 1, color: Color(0xffDEDEDE)), + ), + child: Column( + mainAxisSize: MainAxisSize.min, + children: [ + Text( + TranslationBase.of(context).add, + style: TextStyle( + fontSize: 12, + fontWeight: FontWeight.w500, + color: Color(0xff575757), + letterSpacing: -0.44, + ), + ), + Text( + _text, + style: TextStyle( + fontSize: 14, + fontWeight: FontWeight.w600, + color: Color(0xff2E303A), + letterSpacing: -0.56, + ), + ), + ], + ), + ), + ); + } + + void showConfirmMessage(context, int amount, H2OViewModel model) { + showDialog( + context: context, + child: ConfirmAddAmountDialog( + model: model, + amount: amount, + ), + ); + } + + void undoVolume(context, H2OViewModel model) async { + GifLoaderDialogUtils.showMyDialog(context); + await model.undoUserActivity(); + GifLoaderDialogUtils.hideDialog(context); + } } diff --git a/lib/uitl/translations_delegate_base.dart b/lib/uitl/translations_delegate_base.dart index 5eefc789..f17dc044 100644 --- a/lib/uitl/translations_delegate_base.dart +++ b/lib/uitl/translations_delegate_base.dart @@ -2064,6 +2064,10 @@ class TranslationBase { String get remaining => localizedValues["remaining"][locale.languageCode]; + String get addCustomAmount => localizedValues["addCustomAmount"][locale.languageCode]; + + String get left => localizedValues["left"][locale.languageCode]; + String get taken => localizedValues["taken"][locale.languageCode]; String get ml => localizedValues["ml"][locale.languageCode]; diff --git a/pubspec.yaml b/pubspec.yaml index c6f7f778..bc1d22f4 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -202,6 +202,7 @@ dependencies: auto_size_text: ^2.0.1 equatable: ^1.2.5 signalr_core: ^1.0.8 + wave: ^0.1.0 dev_dependencies: flutter_test: