From 2b8caab71db452428061039ef20834c58d749674 Mon Sep 17 00:00:00 2001 From: Elham Rababah Date: Mon, 24 May 2021 12:35:54 +0300 Subject: [PATCH] fix sms pop up scrolling --- lib/config/size_config.dart | 29 +++ lib/widgets/auth/sms-popup.dart | 354 ++++++++++++++++---------------- 2 files changed, 211 insertions(+), 172 deletions(-) diff --git a/lib/config/size_config.dart b/lib/config/size_config.dart index 6b996b3f..2763091b 100644 --- a/lib/config/size_config.dart +++ b/lib/config/size_config.dart @@ -17,6 +17,7 @@ class SizeConfig { static bool isPortrait = true; static bool isMobilePortrait = false; static bool isMobile = false; + static bool isHeightShort = false; void init(BoxConstraints constraints, Orientation orientation) { realScreenHeight = constraints.maxHeight; @@ -26,6 +27,9 @@ class SizeConfig { if (constraints.maxWidth <= MAX_SMALL_SCREEN) { isMobile = true; } + if (constraints.maxHeight < 800) { + isHeightShort = true; + } if (orientation == Orientation.portrait) { isPortrait = true; if (realScreenWidth < 450) { @@ -60,4 +64,29 @@ class SizeConfig { print('isPortrait $isPortrait'); print('isMobilePortrait $isMobilePortrait'); } + + static getTextMultiplierBasedOnWidth({double width}){ + // TODO handel LandScape case + if(width != null) { + return width / 100; + } + return widthMultiplier; + } + + + static getWidthMultiplier({double width}){ + // TODO handel LandScape case + if(width != null) { + return width / 100; + } + return widthMultiplier; + } + + static getHeightMultiplier({double height}){ + // TODO handel LandScape case + if(height != null) { + return height / 100; + } + return heightMultiplier; + } } diff --git a/lib/widgets/auth/sms-popup.dart b/lib/widgets/auth/sms-popup.dart index 528102b0..b998614b 100644 --- a/lib/widgets/auth/sms-popup.dart +++ b/lib/widgets/auth/sms-popup.dart @@ -5,7 +5,9 @@ import 'package:doctor_app_flutter/core/enum/auth_method_types.dart'; import 'package:doctor_app_flutter/core/viewModel/project_view_model.dart'; import 'package:doctor_app_flutter/icons_app/doctor_app_icons.dart'; import 'package:doctor_app_flutter/util/translations_delegate_base.dart'; +import 'package:doctor_app_flutter/widgets/shared/app_scaffold_widget.dart'; import 'package:doctor_app_flutter/widgets/shared/app_texts_widget.dart'; +import 'package:doctor_app_flutter/widgets/shared/divider_with_spaces_around.dart'; import 'package:flutter/material.dart'; import 'package:provider/provider.dart'; class SMSOTP { @@ -47,208 +49,208 @@ class SMSOTP { String displayTime = ''; bool isClosed = false; displayDialog(BuildContext context) async { - double dialogWidth = MediaQuery.of(context).size.width * 0.84; - double dialogHeight = MediaQuery.of(context).size.height * 0.50; + double dialogWidth = MediaQuery.of(context).size.width * 0.90; + double dialogHeight = SizeConfig.isHeightShort ?MediaQuery.of(context).size.height * 0.50:MediaQuery.of(context).size.height * 0.40; return showDialog( context: context, - barrierColor: Colors.black.withOpacity(0.7), - builder: (context) { - projectProvider = Provider.of(context); - return AlertDialog( - contentPadding: EdgeInsets.fromLTRB(24.0, 0.0, 0.0, 24.0), - content: StatefulBuilder(builder: (context, setState) { - if (displayTime == '') { - startTimer(setState); - } - return Container( - color: Colors.white, - height: dialogHeight, - width: dialogWidth, - child: Center( - child: SingleChildScrollView( - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Padding( - padding: EdgeInsets.all(13), - child: Row( - mainAxisAlignment: MainAxisAlignment - .spaceBetween, - children: [ - Padding( - child: Icon( - type == AuthMethodTypes.SMS - ? DoctorApp.verify_sms_1 - : DoctorApp.verify_whtsapp, - size: dialogWidth * 0.13, - ), - padding: EdgeInsets.only(bottom: 20), - ), - Row( - mainAxisAlignment: MainAxisAlignment.end, - children: [ - Padding( - padding: EdgeInsets.only( - left: 10, right: 10, bottom: 20), - child: IconButton( - icon: Icon(Icons.close), - iconSize: dialogWidth * 0.13, - onPressed: () { - this.isClosed = true; - Navigator.pop(context); - this.onFailure(); - }, - )) - ], - ) - ])), - Padding( - padding: EdgeInsets.only(top: 5, right: 5), - child: AppText( - TranslationBase.of(context).verificationMessage + - ' XXXXXX' + - mobileNo - .toString() - .substring(mobileNo.toString().length - 3), - textAlign: TextAlign.start, - fontWeight: FontWeight.bold, - fontSize: 14, - maxLines: 2, - )), - Form( - key: verifyAccountForm, - child: Padding( - padding: EdgeInsets.only(top: 20), - child: Directionality( - textDirection: TextDirection.ltr, - child: Row( - mainAxisAlignment: MainAxisAlignment.start, + builder: (ctx) => Center( + child: Container( + height: dialogHeight, + width: dialogWidth, + child: AppScaffold( + isShowAppBar: false, + body: SingleChildScrollView( + child: Container( + color: Colors.white, + child: StatefulBuilder(builder: (context, setState) { + if (displayTime == '') { + startTimer(setState); + } + + return Center( + child: FractionallySizedBox( + widthFactor: 0.9, + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + SizedBox(height: SizeConfig.getHeightMultiplier(height:dialogHeight) * 2,), + + Row( + mainAxisAlignment: MainAxisAlignment + .spaceBetween, + children: [ + Icon( + type == AuthMethodTypes.SMS + ? DoctorApp.verify_sms_1 + : DoctorApp.verify_whtsapp, + size: dialogWidth * 0.13, + ), + Row( + mainAxisAlignment: MainAxisAlignment.end, children: [ - Container( - width: (dialogWidth / 4) - 20, - height: 100, - margin: EdgeInsets.all(5), - child: TextFormField( - textInputAction: TextInputAction - .next, - style: buildTextStyle(), - autofocus: true, - maxLength: 1, - controller: digit1, - textAlign: TextAlign.center, - keyboardType: TextInputType.number, - decoration: buildInputDecoration( - context), - onSaved: (val) {}, - validator: validateCodeDigit, - onFieldSubmitted: (_) { - FocusScope.of(context) - .requestFocus(focusD2); - }, - onChanged: (val) { - if (val.length == 1) { - FocusScope.of(context) - .requestFocus(focusD2); - verifyAccountFormValue['digit1'] = - val.trim(); - checkValue(); - } - }, - ), - ), - Container( - width: dialogWidth / 4 - 30, - margin: EdgeInsets.all(5), - child: TextFormField( - focusNode: focusD2, + IconButton( + icon: Icon(Icons.close), + iconSize: dialogWidth * 0.13, + onPressed: () { + this.isClosed = true; + Navigator.pop(context); + this.onFailure(); + }, + ) + ], + ) + ]), + SizedBox(height: SizeConfig.getHeightMultiplier(height:dialogHeight) * 10,), + Padding( + padding: EdgeInsets.only(top: 5, right: 5), + child: AppText( + TranslationBase.of(context).verificationMessage + + ' XXXXXX' + + mobileNo + .toString() + .substring(mobileNo.toString().length - 3), + textAlign: TextAlign.start, + fontWeight: FontWeight.bold, + fontSize: SizeConfig.getTextMultiplierBasedOnWidth(width: dialogWidth) * 3.5, //14, + maxLines: 2, + )), + Form( + key: verifyAccountForm, + child: Padding( + padding: EdgeInsets.only(top: SizeConfig.getHeightMultiplier(height:dialogHeight) * 2), + child: Directionality( + textDirection: TextDirection.ltr, + child: Row( + mainAxisAlignment: MainAxisAlignment.start, + children: [ + Container( + width: (dialogWidth / 4) - 20, + height: SizeConfig.getHeightMultiplier(height:dialogHeight) * 30, + margin: EdgeInsets.symmetric(vertical: 2,horizontal: 5), + child: TextFormField( textInputAction: TextInputAction .next, + style: buildTextStyle(), + autofocus: true, maxLength: 1, - controller: digit2, + controller: digit1, textAlign: TextAlign.center, - style: buildTextStyle(), - keyboardType: TextInputType - .number, + keyboardType: TextInputType.number, decoration: buildInputDecoration( context), onSaved: (val) {}, + validator: validateCodeDigit, onFieldSubmitted: (_) { FocusScope.of(context) - .requestFocus(focusD3); + .requestFocus(focusD2); }, onChanged: (val) { if (val.length == 1) { FocusScope.of(context) - .requestFocus(focusD3); - verifyAccountFormValue['digit2'] = + .requestFocus(focusD2); + verifyAccountFormValue['digit1'] = val.trim(); checkValue(); } }, - validator: validateCodeDigit), - ), - Container( - margin: EdgeInsets.all(5), - width: dialogWidth / 4 - 30, + ), + ), + Container( + width: dialogWidth / 4 - 20, + height: SizeConfig.getHeightMultiplier(height:dialogHeight) * 30, + + margin: EdgeInsets.symmetric(vertical: 2,horizontal: 5), child: TextFormField( - focusNode: focusD3, + focusNode: focusD2, textInputAction: TextInputAction .next, maxLength: 1, - controller: digit3, + controller: digit2, textAlign: TextAlign.center, style: buildTextStyle(), keyboardType: TextInputType .number, - decoration: - buildInputDecoration(context), + decoration: buildInputDecoration( + context), onSaved: (val) {}, onFieldSubmitted: (_) { FocusScope.of(context) - .requestFocus(focusD4); + .requestFocus(focusD3); }, onChanged: (val) { if (val.length == 1) { FocusScope.of(context) - .requestFocus(focusD4); - verifyAccountFormValue['digit3'] = + .requestFocus(focusD3); + verifyAccountFormValue['digit2'] = val.trim(); checkValue(); } }, - validator: validateCodeDigit)), - Container( - margin: EdgeInsets.all(5), - width: dialogWidth / 4 - 30, - child: TextFormField( - focusNode: focusD4, - maxLength: 1, - textAlign: TextAlign.center, - style: buildTextStyle(), - controller: digit4, - keyboardType: TextInputType - .number, - decoration: - buildInputDecoration(context), - onFieldSubmitted: (_) { - FocusScope.of(context) - .requestFocus(focusD4); - }, - onChanged: (val) { - if (val.length == 1) { - verifyAccountFormValue['digit4'] = - val.trim(); - checkValue(); - } - }, - validator: validateCodeDigit)), - ], - )), + validator: validateCodeDigit), + ), + Container( + margin: EdgeInsets.symmetric(vertical: 2,horizontal: 5), + width: dialogWidth / 4 - 20, + height: SizeConfig.getHeightMultiplier(height:dialogHeight) * 30, + child: TextFormField( + focusNode: focusD3, + textInputAction: TextInputAction + .next, + maxLength: 1, + controller: digit3, + textAlign: TextAlign.center, + style: buildTextStyle(), + keyboardType: TextInputType + .number, + decoration: + buildInputDecoration(context), + onSaved: (val) {}, + onFieldSubmitted: (_) { + FocusScope.of(context) + .requestFocus(focusD4); + }, + onChanged: (val) { + if (val.length == 1) { + FocusScope.of(context) + .requestFocus(focusD4); + verifyAccountFormValue['digit3'] = + val.trim(); + checkValue(); + } + }, + validator: validateCodeDigit)), + Container( + margin: EdgeInsets.symmetric(vertical: 2,horizontal: 5), + width: dialogWidth / 4 - 20, + height: SizeConfig.getHeightMultiplier(height:dialogHeight) * 30, + + child: TextFormField( + focusNode: focusD4, + maxLength: 1, + textAlign: TextAlign.center, + style: buildTextStyle(), + controller: digit4, + keyboardType: TextInputType + .number, + decoration: + buildInputDecoration(context), + onFieldSubmitted: (_) { + FocusScope.of(context) + .requestFocus(focusD4); + }, + onChanged: (val) { + if (val.length == 1) { + verifyAccountFormValue['digit4'] = + val.trim(); + checkValue(); + } + }, + validator: validateCodeDigit)), + ], + )), + ), ), - ), - Padding( - padding: const EdgeInsets.all(12.0), - child: Column( + Column( mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start, children: [ @@ -256,7 +258,7 @@ class SMSOTP { TranslationBase.of(context).validationMessage + ' ', fontWeight: FontWeight.w600, - fontSize: 14, + fontSize: SizeConfig.getTextMultiplierBasedOnWidth(width: dialogWidth) * 3.5, ), AppText( displayTime, @@ -265,19 +267,27 @@ class SMSOTP { fontWeight: FontWeight.bold, fontSize: 14, ) - ]), - ) - ], - ))), - ); - }), - ); - }); + ]) + ], + ), + ), + ); + + }) + + + ), + ), + ), + ), + ), + + ); } TextStyle buildTextStyle() { return TextStyle( - fontSize: SizeConfig.textMultiplier * 3, + fontSize: SizeConfig.textMultiplier * 2.5, ); }