From 763c16ddd0b6fce464ed35616dad2c5191ba5fec Mon Sep 17 00:00:00 2001 From: Sikander Saleem Date: Sun, 10 Oct 2021 11:52:11 +0300 Subject: [PATCH 1/3] h2o setting ui redesigned. --- lib/config/localized_values.dart | 7 +- .../h2o/h20_setting.dart | 647 +++++++++++------- lib/uitl/translations_delegate_base.dart | 10 + 3 files changed, 415 insertions(+), 249 deletions(-) diff --git a/lib/config/localized_values.dart b/lib/config/localized_values.dart index 9d2193ef..05f60cd6 100644 --- a/lib/config/localized_values.dart +++ b/lib/config/localized_values.dart @@ -232,6 +232,7 @@ const Map localizedValues = { 'heart': {'en': 'Heart Rate', 'ar': 'معدل النبض'}, "heightUnit": {"en": "height unit", "ar": "وحدة الطول"}, "weightUnit": {"en": "Weight Unit", "ar": "وحدة الوزن"}, + "unit": {"en": "Unit", "ar": "وحدة"}, "request": {"en": "Request", "ar": "طلبات الاضافة"}, "member-name": {"en": "Member Name", "ar": "اسم العضو"}, "switch-login": {"en": "Switch User", "ar": "تغير المستخدم"}, @@ -508,7 +509,7 @@ const Map localizedValues = { "order": {"en": "My Order", "ar": " طلباتي"}, "delivered": {"en": "Delivered", "ar": " تم التوصيل"}, "pending": {"en": "Pending", "ar": " معلقة "}, - "enterNameHere": {"en": "Enter the name here", "ar": " أدخل الاسم هنا "}, + "enterNameHere": {"en": "Enter Your Name", "ar": "أدخل أسمك"}, "processing": {"en": "Processing", "ar": " تحت المعالجة"}, "cancelled": {"en": "Cancelled", "ar": " ملغي"}, "writeReview": {"en": "Write Review", "ar": " اكتب تقييمك"}, @@ -798,6 +799,7 @@ const Map localizedValues = { "kg": {"en": "kg", "ar": "كجم"}, "lb": {"en": "lb", "ar": "رطل"}, "birth_date": {"en": "Birth Date", "ar": "تاريخ الميلاد"}, + "date_of_birth": {"en": "Date of Birth", "ar": "تاريخ الولادة"}, "mass": {"en": "Mass", "ar": "كتلة"}, "temp-c": {"en": "°C", "ar": "°س"}, "bpm": {"en": "bpm", "ar": "نبضة"}, @@ -1263,6 +1265,7 @@ const Map localizedValues = { "today": {"en": "Today", "ar": "اليوم"}, "week": {"en": "Week", "ar": "أسبوع"}, "month": {"en": "Month", "ar": "شهر"}, + "enter_detail_below": {"en": "Enter the details below", "ar": "أدخل التفاصيل أدناه"}, "h2o-amount-of-water": {"en": "Enter the amount of water:", "ar": "ادخل كمية الماء:"}, "update-user": {"en": "Update Information", "ar": "تحديث بيانات"}, "editname": {"en": "Enter the name here", "ar": "أدخل الاسم هنا"}, @@ -1281,7 +1284,9 @@ const Map localizedValues = { "remaining": {"en": "Remaining", "ar": "المتبقي"}, "taken": {"en": "Taken", "ar": " مأخوذ"}, "ml": {"en": "ML", "ar": "مل"}, + "mililitre": {"en": "Mililitre (ml)", "ar": "مليلتر (مل)"}, "l": {"en": "L", "ar": "لتر"}, + "litre": {"en": "Litre (l)", "ar": "لتر (لتر)"}, "custom-label": {"en": "Enter amount", "ar": "أدخل كمية الماء"}, "custom-label-in-litres": {"en": "Enter amount in liters", "ar": "أدخل الكمية باللتر"}, "custom-label-in-mililitres": {"en": "Enter amount in millilitres", "ar": "أدخل الكمية بالملليتر"}, diff --git a/lib/pages/AlHabibMedicalService/h2o/h20_setting.dart b/lib/pages/AlHabibMedicalService/h2o/h20_setting.dart index b944c550..84d3f13b 100644 --- a/lib/pages/AlHabibMedicalService/h2o/h20_setting.dart +++ b/lib/pages/AlHabibMedicalService/h2o/h20_setting.dart @@ -1,9 +1,6 @@ import 'package:diplomaticquarterapp/config/shared_pref_kay.dart'; import 'package:diplomaticquarterapp/core/model/AlHabibMedicalService/H2O/user_detail_model.dart'; -import 'package:diplomaticquarterapp/core/service/AlHabibMedicalService/H2O_service.dart'; import 'package:diplomaticquarterapp/core/viewModels/AlHabibMedicalService/H2O_view_model.dart'; -import 'package:diplomaticquarterapp/pages/BookAppointment/widgets/BranchView.dart'; -import 'package:diplomaticquarterapp/pages/base/base_view.dart'; import 'package:diplomaticquarterapp/uitl/app_toast.dart'; import 'package:diplomaticquarterapp/uitl/date_uitl.dart'; import 'package:diplomaticquarterapp/uitl/gif_loader_dialog_utils.dart'; @@ -23,6 +20,7 @@ import 'Dialog/setting_page_radio_button_list_dialog.dart'; class H2oSetting extends StatefulWidget { final UserDetailModel userDetailModel; final H2OViewModel viewModel; + H2oSetting({Key key, this.userDetailModel, this.viewModel}) : super(key: key); @override @@ -35,6 +33,9 @@ class _H2oSettingState extends State { TextEditingController _nameController = TextEditingController(); TextEditingController _heightController = TextEditingController(); TextEditingController _weightController = TextEditingController(); + List _weightPopupList = List(); + List _heightPopupList = List(); + bool _isUnitML = true; bool _isGenderMale = false; bool _isHeightCM = false; @@ -69,6 +70,7 @@ class _H2oSettingState extends State { } SharedPreferences prefs; + void readPrefs() async { prefs = await SharedPreferences.getInstance(); _isUnitML = (prefs.getString(H2O_UNIT) ?? "ml") == "ml" ? true : false; @@ -93,6 +95,9 @@ class _H2oSettingState extends State { @override Widget build(BuildContext 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, appBarTitle: TranslationBase.of(context).h2o, @@ -109,30 +114,31 @@ class _H2oSettingState extends State { child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ - inputWidget(TranslationBase.of(context).enterNameHere, TranslationBase.of(context).enterNameHere, _nameController), - // TextField( - // controller: _nameController, - // decoration: InputDecoration( - // labelText: TranslationBase.of(context).enterNameHere, - // labelStyle: TextStyle(color: Colors.black87), - // fillColor: Colors.white, - // filled: true, - // border: UnderlineInputBorder( - // borderSide: BorderSide( - // width: 0, - // style: BorderStyle.none, - // ), - // borderRadius: BorderRadius.circular(6.0), - // ), - // ), - // ), + Text( + TranslationBase.of(context).enterDetailBelow, + style: TextStyle( + fontSize: 19, + height: 23 / 19, + fontWeight: FontWeight.w700, + color: Color(0xff2E303A), + letterSpacing: -1.14, + ), + ), + SizedBox(height: 12), + _containerWidget(inputWidget(TranslationBase.of(context).enterNameHere, TranslationBase.of(context).name, _nameController)), SizedBox(height: 16), Text( TranslationBase.of(context).preferredunit, - style: TextStyle(fontSize: 12, fontWeight: FontWeight.w600, color: Color(0xff2B353E), letterSpacing: -0.48, height: 18 / 12), + style: TextStyle( + fontSize: 14, + height: 21 / 14, + fontWeight: FontWeight.w600, + color: Color(0xff2B353E), + letterSpacing: -0.44, + ), ), SizedBox(height: 12), - _commonButtonsRow(TranslationBase.of(context).ml, TranslationBase.of(context).l, _isUnitML, (value) { + _commonRadioButtonsRow(TranslationBase.of(context).mililitre, TranslationBase.of(context).litre, _isUnitML, (value) { if (_isUnitML != value) { setState(() { _isUnitML = value; @@ -142,175 +148,157 @@ class _H2oSettingState extends State { SizedBox(height: 12), Text( TranslationBase.of(context).pleaseSelectGender, - style: TextStyle(fontSize: 12, fontWeight: FontWeight.w600, color: Color(0xff2B353E), letterSpacing: -0.48, height: 18 / 12), + style: TextStyle( + fontSize: 14, + height: 21 / 14, + fontWeight: FontWeight.w600, + color: Color(0xff2B353E), + letterSpacing: -0.44, + ), ), SizedBox(height: 12), - _commonButtonsRow(TranslationBase.of(context).male, TranslationBase.of(context).female, _isGenderMale, (value) { + _commonRadioButtonsRow(TranslationBase.of(context).male, TranslationBase.of(context).female, _isGenderMale, (value) { if (_isGenderMale != value) { setState(() { _isGenderMale = value; }); } }), - SizedBox(height: 12), - Text(TranslationBase.of(context).height), - _commonSlidersRow(_heightController, 1, 270, _heightValue, (text) { - _heightController.text = text; - }, (value) { - setState(() { - _heightValue = value; - }); - }), - SizedBox(height: 8), - Text(TranslationBase.of(context).heightUnit), - SizedBox(height: 8), - _commonButtonsRow(TranslationBase.of(context).cm, TranslationBase.of(context).ft, _isHeightCM, (value) { - if (_isHeightCM != value) { - setState(() { - _isHeightCM = value; - }); - } - }), - SizedBox(height: 8), - _commonSlidersRow(_weightController, 1, 250, _weightValue, (text) { - _weightController.text = text; - }, (value) { - setState(() { - _weightValue = value; - }); - }), - SizedBox(height: 8), - Text(TranslationBase.of(context).weightUnit), - SizedBox(height: 8), - _commonButtonsRow(TranslationBase.of(context).kg, TranslationBase.of(context).lb, _isWeightKG, (value) { - if (_isWeightKG != value) { - setState(() { - _isWeightKG = value; - }); - } - }), - Padding( - padding: EdgeInsets.only(top: 8.0, bottom: 8.0), - child: Divider(height: 1.5, color: Colors.black54), - ), - Container( - padding: EdgeInsets.all(8), - width: MediaQuery.of(context).size.width, - decoration: BoxDecoration(borderRadius: BorderRadius.circular(8), color: Colors.white), - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text("${TranslationBase.of(context).birth_date}:"), - SizedBox(height: 8), - InkWell( - onTap: () { - showModalBottomSheet( - context: context, - builder: (context) { - return Container( - height: 250, - padding: EdgeInsets.all(8), - child: Column(children: [ - Container( - height: 40, - alignment: Alignment.centerRight, - child: Row(mainAxisSize: MainAxisSize.min, children: [ - InkWell( - onTap: () => Navigator.pop(context), - child: Container( - alignment: Alignment.center, - padding: EdgeInsets.fromLTRB(8, 4, 8, 4), - child: Text(TranslationBase.of(context).cancel), - ), - ), - SizedBox(width: 8), - InkWell( - onTap: () { - Navigator.pop(context); - setState(() { - _dobDate = _tempDate; - }); - }, - child: Container( - alignment: Alignment.center, - padding: EdgeInsets.fromLTRB(8, 4, 8, 4), - child: Text(TranslationBase.of(context).ok), - ), - ) - ]), - ), - Expanded( - child: Container( - width: MediaQuery.of(context).size.width, - child: CupertinoDatePicker( - initialDateTime: _dobDate, - mode: CupertinoDatePickerMode.date, - onDateTimeChanged: (_date) { - _tempDate = _date; - }, - ), - ), - ) - ]), - ); - }); - }, // implement cupertino dialog to select date - child: Row( - crossAxisAlignment: CrossAxisAlignment.center, - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [Text(DateUtil.getFormattedDate(_dobDate, "yyyy-MM-dd")), Icon(Icons.arrow_drop_down_outlined)]), - ) - ], - ), - ), - SizedBox(height: 8), - _commonDialogSelectorRow(TranslationBase.of(context).activityLevel, _activityLevelListEng[_selectedActiveLevel - 1], () { - showDialog( - context: context, - child: CommonRadioButtonDialog( - list: _activityLevelListEng, - title: TranslationBase.of(context).activityLevel, - onSelect: (index) { - Navigator.pop(context); + SizedBox(height: 18), + _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(() { - _selectedActiveLevel = index + 1; + _isHeightCM = value; }); - }, - selectedIndex: _selectedActiveLevel - 1, - ), - ); - }), - SizedBox(height: 8), - _commonDialogSelectorRow(TranslationBase.of(context).reminderLabel, _remindedTimeListEng[_selectedRemindedTime], () { - showDialog( - context: context, - child: CommonRadioButtonDialog( - list: _remindedTimeListEng, - onSelect: (index) { - Navigator.pop(context); + } + }, + _heightPopupList), + SizedBox(height: 12), + _commonInputAndUnitRow( + TranslationBase.of(context).weight, + _weightController, + 1, + 250, + _weightValue, + (text) { + _heightController.text = text; + }, + (value) { + _weightValue = value; + }, + _isWeightKG ? TranslationBase.of(context).kg : TranslationBase.of(context).lb, + (value) { + if (_isWeightKG != value) { setState(() { - _selectedRemindedTime = index; + _isWeightKG = value; }); - }, - selectedIndex: _selectedRemindedTime, - ), - ); - }), - SizedBox(height: 16), - SizedBox( - height: 50, - width: MediaQuery.of(context).size.width, - child: FlatButton( - color: Theme.of(context).appBarTheme.color, - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(8.0), - ), - onPressed: _updateUserDetails, - child: Text( - TranslationBase.of(context).save, - style: TextStyle(color: Colors.white, fontSize: 18, fontWeight: FontWeight.w600), - ), - ), + } + }, + _weightPopupList), + SizedBox(height: 12), + _containerWidget( + _commonDropDownView(TranslationBase.of(context).dateOfBirth, DateUtil.getFormattedDate(_dobDate, "dd MMMM, yyyy"), () { + showModalBottomSheet( + context: context, + builder: (context) { + return Container( + height: 250, + padding: EdgeInsets.all(8), + child: Column(children: [ + Container( + height: 40, + alignment: Alignment.centerRight, + child: Row(mainAxisSize: MainAxisSize.min, children: [ + InkWell( + onTap: () => Navigator.pop(context), + child: Container( + alignment: Alignment.center, + padding: EdgeInsets.fromLTRB(8, 4, 8, 4), + child: Text(TranslationBase.of(context).cancel), + ), + ), + SizedBox(width: 8), + InkWell( + onTap: () { + Navigator.pop(context); + setState(() { + _dobDate = _tempDate; + }); + }, + child: Container( + alignment: Alignment.center, + padding: EdgeInsets.fromLTRB(8, 4, 8, 4), + child: Text(TranslationBase.of(context).ok), + ), + ) + ]), + ), + Expanded( + child: Container( + width: MediaQuery.of(context).size.width, + child: CupertinoDatePicker( + initialDateTime: _dobDate, + mode: CupertinoDatePickerMode.date, + onDateTimeChanged: (_date) { + _tempDate = _date; + }, + ), + ), + ) + ]), + ); + }); + }, iconData: Icons.calendar_today), + ), + SizedBox(height: 12), + _containerWidget( + _commonDropDownView(TranslationBase.of(context).activityLevel, _activityLevelListEng[_selectedActiveLevel - 1], () { + showDialog( + context: context, + child: CommonRadioButtonDialog( + list: _activityLevelListEng, + title: TranslationBase.of(context).activityLevel, + onSelect: (index) { + Navigator.pop(context); + setState(() { + _selectedActiveLevel = index + 1; + }); + }, + selectedIndex: _selectedActiveLevel - 1, + ), + ); + }), + ), + SizedBox(height: 12), + _containerWidget( + _commonDropDownView(TranslationBase.of(context).reminderLabel, _remindedTimeListEng[_selectedRemindedTime], () { + showDialog( + context: context, + child: CommonRadioButtonDialog( + list: _remindedTimeListEng, + onSelect: (index) { + Navigator.pop(context); + setState(() { + _selectedRemindedTime = index; + }); + }, + selectedIndex: _selectedRemindedTime, + ), + ); + }), ), ], ), @@ -330,7 +318,7 @@ class _H2oSettingState extends State { ); } - Widget inputWidget(String _labelText, String _hintText, TextEditingController _controller, {String prefix, bool isEnable = true, bool hasSelection = false}) { + Widget _containerWidget(Widget child) { return Container( padding: EdgeInsets.only(left: 16, right: 16, bottom: 15, top: 15), alignment: Alignment.center, @@ -342,89 +330,159 @@ class _H2oSettingState extends State { 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, - ), + child: child, + ); + } + + Widget _commonDropDownView(String title, String value, VoidCallback callback, {IconData iconData}) { + 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), + ) + ], + ), + ); + } + + Widget inputWidget(String _labelText, String _hintText, TextEditingController _controller, {String prefix, bool isEnable = true, bool hasSelection = false}) { + return InkWell( + onTap: hasSelection ? () {} : null, + child: Row( + children: [ + Expanded( + child: Column( + mainAxisSize: MainAxisSize.min, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + _labelText, + style: TextStyle( + fontSize: 12, + fontWeight: FontWeight.w600, + color: Color(0xff2E303A), + letterSpacing: -0.44, ), - TextField( - enabled: isEnable, - scrollPadding: EdgeInsets.zero, - keyboardType: TextInputType.number, - controller: _controller, - onChanged: (value) => { - // validateForm() - }, - style: TextStyle( + ), + TextField( + enabled: isEnable, + scrollPadding: EdgeInsets.zero, + keyboardType: TextInputType.number, + controller: _controller, + onChanged: (value) => { + // validateForm() + }, + style: TextStyle( + fontSize: 14, + height: 21 / 14, + fontWeight: FontWeight.w400, + color: Color(0xff575757), + letterSpacing: -0.56, + ), + decoration: InputDecoration( + isDense: true, + hintText: _hintText, + hintStyle: TextStyle( fontSize: 14, height: 21 / 14, fontWeight: FontWeight.w400, - color: Color(0xff2B353E), - letterSpacing: -0.44, + color: Color(0xff575757), + letterSpacing: -0.56, ), - 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, - ), + 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, - ), + ), + contentPadding: EdgeInsets.zero, + border: InputBorder.none, + focusedBorder: InputBorder.none, + enabledBorder: InputBorder.none, ), - ], - ), + ), + ], ), - if (hasSelection) Icon(Icons.keyboard_arrow_down_outlined), - ], - ), + ), + if (hasSelection) Icon(Icons.keyboard_arrow_down_outlined), + ], ), ); } - Widget _commonButtonsRow(String rightText, String leftText, bool checkParam, Function(bool) callBack) { - + Widget _commonRadioButtonsRow(String rightText, String leftText, bool checkParam, Function(bool) callBack) { return Row( children: [ - Row(children: [ - Checkbox(value: null, onChanged: null) - ],) - + Row( + mainAxisSize: MainAxisSize.min, + children: [ + SizedBox(width: 22, height: 22, child: Radio(value: true, groupValue: checkParam, onChanged: callBack)), + SizedBox(width: 8), + Text( + rightText, + style: TextStyle( + fontSize: 14, + height: 21 / 14, + fontWeight: FontWeight.w600, + color: Color(0xff575757), + letterSpacing: -0.44, + ), + ), + ], + ), + SizedBox(width: 12), + Row( + mainAxisSize: MainAxisSize.min, + children: [ + SizedBox(width: 22, height: 22, child: Radio(value: false, groupValue: checkParam, onChanged: callBack)), + SizedBox(width: 8), + Text( + leftText, + style: TextStyle( + fontSize: 14, + height: 21 / 14, + fontWeight: FontWeight.w600, + color: Color(0xff575757), + letterSpacing: -0.44, + ), + ), + ], + ), ], ); - + return Row(children: [ Expanded( child: SizedBox( @@ -456,7 +514,99 @@ class _H2oSettingState extends State { ]); } - Widget _commonSlidersRow(_controller, double _minValue, double _maxValue, double _valueOrg, Function(String) onTextValueChange, Function(double) onValueChange) { + Widget _commonInputAndUnitRow(_title, _controller, double _minValue, double _maxValue, double _valueOrg, Function(String) onTextValueChange, Function(double) onValueChange, String unitTitle, + Function(bool) onUnitTap, _list) { + return _containerWidget( + 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), + ) + ], + ), + ); + } + + 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), @@ -584,6 +734,7 @@ class _H2oSettingState extends State { } final CalendarPlugin _myPlugin = CalendarPlugin(); + void _addReminderToCalender(int _selectedRemindedTime) async { bool _calendarPermission = await _myPlugin.hasPermissions(); if (_calendarPermission) { diff --git a/lib/uitl/translations_delegate_base.dart b/lib/uitl/translations_delegate_base.dart index ef19f170..5eefc789 100644 --- a/lib/uitl/translations_delegate_base.dart +++ b/lib/uitl/translations_delegate_base.dart @@ -481,6 +481,8 @@ class TranslationBase { String get height => localizedValues['height'][locale.languageCode]; + String get unit => localizedValues['unit'][locale.languageCode]; + String get heightUnit => localizedValues['heightUnit'][locale.languageCode]; String get weightUnit => localizedValues['weightUnit'][locale.languageCode]; @@ -1306,6 +1308,8 @@ class TranslationBase { String get birth_date => localizedValues['birth_date'][locale.languageCode]; + String get dateOfBirth => localizedValues['date_of_birth'][locale.languageCode]; + String get mass => localizedValues['mass'][locale.languageCode]; String get tempC => localizedValues['temp-c'][locale.languageCode]; @@ -1792,6 +1796,8 @@ class TranslationBase { String get month => localizedValues['Month'][locale.languageCode]; + String get enterDetailBelow => localizedValues['enter_detail_below'][locale.languageCode]; + String get point => localizedValues['point'][locale.languageCode]; String get riyal => localizedValues['riyal'][locale.languageCode]; @@ -2062,6 +2068,10 @@ class TranslationBase { String get ml => localizedValues["ml"][locale.languageCode]; + String get mililitre => localizedValues["mililitre"][locale.languageCode]; + + String get litre => localizedValues["litre"][locale.languageCode]; + String get l => localizedValues["l"][locale.languageCode]; String get customLabel => localizedValues["custom-label"][locale.languageCode]; From 55df00dcd47336ff36ae2335357fa9e461844328 Mon Sep 17 00:00:00 2001 From: Sikander Saleem Date: Sun, 10 Oct 2021 17:39:23 +0300 Subject: [PATCH 2/3] 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: From 2aa6ad5d6b16f819e28e137851c81846c8fdf365 Mon Sep 17 00:00:00 2001 From: Sikander Saleem Date: Sun, 10 Oct 2021 17:40:15 +0300 Subject: [PATCH 3/3] h20 today ui (cont.)1 --- .../AlHabibMedicalService/h2o/today_page.dart | 28 +++++++++---------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/lib/pages/AlHabibMedicalService/h2o/today_page.dart b/lib/pages/AlHabibMedicalService/h2o/today_page.dart index f60aee92..85182717 100644 --- a/lib/pages/AlHabibMedicalService/h2o/today_page.dart +++ b/lib/pages/AlHabibMedicalService/h2o/today_page.dart @@ -175,24 +175,24 @@ class TodayPage extends StatelessWidget { ), ), SizedBox(height: 40), - Text( - TranslationBase.of(context).addCustomAmount, - style: TextStyle( - fontSize: 14, - height: 21 / 14, - fontWeight: FontWeight.w600, - color: Color(0xff2B353E), - letterSpacing: -0.56, - ), - ), + // Text( + // TranslationBase.of(context).addCustomAmount, + // style: TextStyle( + // fontSize: 14, + // height: 21 / 14, + // fontWeight: FontWeight.w600, + // color: Color(0xff2B353E), + // letterSpacing: -0.56, + // ), + // ), ], ), ), - floatingActionButton: H20FloatingActionButton( - // controller: _controller, - model: model, - ), + // floatingActionButton: H20FloatingActionButton( + // // controller: _controller, + // model: model, + // ), ), ); }