diff --git a/lib/pages/login/welcome.dart b/lib/pages/login/welcome.dart index 33a02900..884e76dd 100644 --- a/lib/pages/login/welcome.dart +++ b/lib/pages/login/welcome.dart @@ -320,6 +320,7 @@ class _WelcomeLogin extends State { sendActivationCode(type) async { var request = this.getCommonRequest(type: type); request.sMSSignature = await SMSOTP.getSignature(); + selectedOption = type; GifLoaderDialogUtils.showMyDialog(context); if (healthId != null || isDubai) { if (!isDubai) { @@ -582,6 +583,7 @@ class _WelcomeLogin extends State { authenticatedUserObject: authenticatedUserObject, appointmentRateViewModel: appointmentRateViewModel, selectedOption: selectedOption, + isArabic: projectViewModel.isArabic, ), ), diff --git a/lib/widgets/otp/sms-popup.dart b/lib/widgets/otp/sms-popup.dart index ebb78a77..590fc073 100644 --- a/lib/widgets/otp/sms-popup.dart +++ b/lib/widgets/otp/sms-popup.dart @@ -5,9 +5,11 @@ import 'package:hmg_patient_app/config/size_config.dart'; import 'package:hmg_patient_app/core/viewModels/project_view_model.dart'; import 'package:hmg_patient_app/theme/colors.dart'; import 'package:hmg_patient_app/uitl/translations_delegate_base.dart'; +import 'package:hmg_patient_app/uitl/utils.dart'; import 'package:hmg_patient_app/uitl/whatsapp_method_channel.dart'; import 'package:flutter/material.dart'; import 'package:flutter_svg/svg.dart'; +import 'package:hmg_patient_app/widgets/others/app_scaffold_widget.dart'; import 'package:provider/provider.dart'; import 'package:sms_otp_auto_verify/sms_otp_auto_verify.dart'; @@ -80,66 +82,55 @@ class SMSOTP { static String? signature; displayDialog(BuildContext context) async { - // var signature = await checkSignature(); - - // print(signature); - - // if (signature) { - - // onSuccess(signature); - - // } - - return showDialog( - context: context, - barrierColor: Colors.black.withOpacity(0.63), - builder: (context) { - projectProvider = Provider.of(context); - - return Dialog( - backgroundColor: Colors.white, - shape: RoundedRectangleBorder(), - insetPadding: EdgeInsets.only(left: 21, right: 21), - child: StatefulBuilder(builder: (context, setState) { - if (displayTime == '') { - startTimer(setState); - if (Platform.isAndroid ) { - if (type == 1) checkSignature(); - else if(type == 4) _listenWhatsAppCode(); - } - } - - return Container( - padding: EdgeInsets.only(left: 21, right: 18, top: 39, bottom: 59), + return showGeneralDialog( + context: context, + barrierColor: Colors.black.withOpacity(0.63), + barrierDismissible: false, + transitionDuration: Duration(milliseconds: 300), + pageBuilder: (context, animation1, animation2) { + projectProvider = Provider.of(context); + + return StatefulBuilder(builder: (context, setState) { + if (displayTime == '') { + startTimer(setState); + if (Platform.isAndroid) { + if (type == 1) + checkSignature(); + else if (type == 4) _listenWhatsAppCode(); + } + } + + return AppScaffold( + appBarTitle: "OTP Verification", + isShowDecPage: false, + isShowAppBar: true, + isshowBackButton: true, + showNewAppBar: true, + backgroundColor: Color(0xffF8F8F8), + showNewAppBarTitle: true, + showDropDown: false, + isShowLanguageChanger: false, + showHomeAppBarIcon: false, + resizeToAvoidBottomInset: true, + appBarIcons: [], + dropDownIndexChange: (value) { + Utils.changeAppLanguage(context: context); + }, + body: SafeArea( + child: Padding( + padding: const EdgeInsets.symmetric(horizontal: 21, vertical: 20), child: Column( - mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.start, children: [ - Row( - crossAxisAlignment: CrossAxisAlignment.start, - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - SvgPicture.asset( - type == 1 ? "assets/images/new/verify_sms.svg" : "assets/images/new/verify_whatsapp.svg", - height: 50, - width: 50, - ), - IconButton( - padding: EdgeInsets.zero, - icon: Icon(Icons.close), - constraints: BoxConstraints(), - onPressed: () { - Navigator.pop(context); - - this.onFailure(); - }, - ) - ], - ), SizedBox(height: 22), Text( TranslationBase.of(context).pleaseEnterTheVerificationCode + ' xxxxxxxx' + mobileNo.toString().substring(mobileNo.toString().length - 3), - style: TextStyle(fontSize: 16, fontWeight: FontWeight.w600, color: Color(0xff2B353E), letterSpacing: -0.48), + style: TextStyle( + fontSize: 16, + fontWeight: FontWeight.w600, + color: Color(0xff2B353E), + letterSpacing: -0.48, + ), ), SizedBox(height: 18), Directionality( @@ -148,21 +139,19 @@ class SMSOTP { child: OTPWidget( autoFocus: true, controller: _pinPutController, - defaultBorderColor: Color(0xffD8D8D8), + defaultBorderColor: Color(0xffffffff), maxLength: 4, onTextChanged: (text) {}, pinBoxColor: Colors.white, onDone: (code) => _onOtpCallBack(code, false), - textBorderColor: Color(0xffD8D8D8), - pinBoxWidth: 60, - pinBoxHeight: 60, - pinTextStyle: TextStyle( - fontSize: 24.0, - color: Color(0xff2B353E), - ), + textBorderColor: Color(0xffffff), + pinBoxWidth: 76, + pinBoxHeight: 94, + pinTextStyle: TextStyle(fontSize: 24.0, color: Color(0xff2B353E)), pinTextAnimatedSwitcherTransition: ProvidedPinBoxTextAnimation.scalingTransition, pinTextAnimatedSwitcherDuration: Duration(milliseconds: 300), - pinBoxRadius: 10, + pinBoxRadius: 18, + keyboardType: TextInputType.number, ), ), @@ -171,21 +160,130 @@ class SMSOTP { RichText( text: TextSpan( text: TranslationBase.of(context).validationMessage + '\n', - style: TextStyle(fontSize: 16, fontWeight: FontWeight.w600, color: Color(0xff2B353E), letterSpacing: -0.48), + style: TextStyle( + fontSize: 16, + fontWeight: FontWeight.w600, + color: Color(0xff2B353E), + letterSpacing: -0.48, + ), children: [ TextSpan( text: displayTime, - style: TextStyle(fontSize: 16, fontWeight: FontWeight.w600, color: Color(0xffD02127), letterSpacing: -0.48), + style: TextStyle( + fontSize: 16, + fontWeight: FontWeight.w600, + color: Color(0xffD02127), + letterSpacing: -0.48, + ), ), ], ), ), ], ), - ); - }), + ), + ), ); }); + }, + ); + + // return showDialog( + // context: context, + // barrierColor: Colors.black.withOpacity(0.63), + // builder: (context) { + // projectProvider = Provider.of(context); + // + // return Dialog( + // backgroundColor: Colors.white, + // shape: RoundedRectangleBorder(), + // insetPadding: EdgeInsets.only(left: 21, right: 21), + // child: StatefulBuilder(builder: (context, setState) { + // if (displayTime == '') { + // startTimer(setState); + // if (Platform.isAndroid ) { + // if (type == 1) checkSignature(); + // else if(type == 4) _listenWhatsAppCode(); + // } + // } + // + // return Container( + // padding: EdgeInsets.only(left: 21, right: 18, top: 39, bottom: 59), + // child: Column( + // mainAxisSize: MainAxisSize.min, + // crossAxisAlignment: CrossAxisAlignment.start, + // children: [ + // Row( + // crossAxisAlignment: CrossAxisAlignment.start, + // mainAxisAlignment: MainAxisAlignment.spaceBetween, + // children: [ + // SvgPicture.asset( + // type == 1 ? "assets/images/new/verify_sms.svg" : "assets/images/new/verify_whatsapp.svg", + // height: 50, + // width: 50, + // ), + // IconButton( + // padding: EdgeInsets.zero, + // icon: Icon(Icons.close), + // constraints: BoxConstraints(), + // onPressed: () { + // Navigator.pop(context); + // + // this.onFailure(); + // }, + // ) + // ], + // ), + // SizedBox(height: 22), + // Text( + // TranslationBase.of(context).pleaseEnterTheVerificationCode + ' xxxxxxxx' + mobileNo.toString().substring(mobileNo.toString().length - 3), + // style: TextStyle(fontSize: 16, fontWeight: FontWeight.w600, color: Color(0xff2B353E), letterSpacing: -0.48), + // ), + // SizedBox(height: 18), + // Directionality( + // textDirection: TextDirection.ltr, + // child: Center( + // child: OTPWidget( + // autoFocus: true, + // controller: _pinPutController, + // defaultBorderColor: Color(0xffD8D8D8), + // maxLength: 4, + // onTextChanged: (text) {}, + // pinBoxColor: Colors.white, + // onDone: (code) => _onOtpCallBack(code, false), + // textBorderColor: Color(0xffD8D8D8), + // pinBoxWidth: 60, + // pinBoxHeight: 60, + // pinTextStyle: TextStyle( + // fontSize: 24.0, + // color: Color(0xff2B353E), + // ), + // pinTextAnimatedSwitcherTransition: ProvidedPinBoxTextAnimation.scalingTransition, + // pinTextAnimatedSwitcherDuration: Duration(milliseconds: 300), + // pinBoxRadius: 10, + // keyboardType: TextInputType.number, + // ), + // ), + // ), + // SizedBox(height: 30), + // RichText( + // text: TextSpan( + // text: TranslationBase.of(context).validationMessage + '\n', + // style: TextStyle(fontSize: 16, fontWeight: FontWeight.w600, color: Color(0xff2B353E), letterSpacing: -0.48), + // children: [ + // TextSpan( + // text: displayTime, + // style: TextStyle(fontSize: 16, fontWeight: FontWeight.w600, color: Color(0xffD02127), letterSpacing: -0.48), + // ), + // ], + // ), + // ), + // ], + // ), + // ); + // }), + // ); + // }); } TextStyle buildTextStyle() { @@ -300,7 +398,7 @@ class SMSOTP { }); } - void _listenWhatsAppCode(){ + void _listenWhatsAppCode() { WhatsappMethodChannel().startListening().then((message) { final intRegex = RegExp(r'\d+', multiLine: true); var otp = SmsVerification.getCode(message, intRegex); diff --git a/lib/widgets/otp_widget.dart b/lib/widgets/otp_widget.dart index d606090d..f6ad351b 100644 --- a/lib/widgets/otp_widget.dart +++ b/lib/widgets/otp_widget.dart @@ -5,6 +5,7 @@ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:flutter/rendering.dart'; import 'package:flutter/services.dart'; +import 'package:hmg_patient_app/uitl/utils.dart'; typedef OnDone = void Function(String text); @@ -80,7 +81,7 @@ class OTPWidget extends StatefulWidget { } class OTPWidgetState extends State with SingleTickerProviderStateMixin { - late AnimationController _highlightAnimationController; + late AnimationController _highlightAnimationController; late FocusNode focusNode; String text = ""; int currentIndex = 0; @@ -195,6 +196,7 @@ class OTPWidgetState extends State with SingleTickerProviderStateMixi @override Widget build(BuildContext context) { return Stack( + fit: StackFit.loose, children: [ _otpTextInput(), _touchPinBoxRow(), @@ -223,10 +225,7 @@ class OTPWidgetState extends State with SingleTickerProviderStateMixi Widget _otpTextInput() { var transparentBorder = OutlineInputBorder( - borderSide: BorderSide( - color: Colors.transparent, - width: 0.0, - ), + borderSide: BorderSide(color: Colors.transparent, width: 0), ); return Container( width: _width, @@ -238,27 +237,20 @@ class OTPWidgetState extends State with SingleTickerProviderStateMixi controller: widget.controller, keyboardType: widget.keyboardType, inputFormatters: widget.keyboardType == TextInputType.number ? [FilteringTextInputFormatter.digitsOnly] : null, - style: TextStyle( - height: 0.1, - color: Colors.transparent, - ), + style: TextStyle(height: 0.1, color: Colors.transparent), decoration: InputDecoration( - contentPadding: EdgeInsets.all(0), - focusedErrorBorder: transparentBorder, - errorBorder: transparentBorder, - disabledBorder: transparentBorder, - enabledBorder: transparentBorder, - focusedBorder: transparentBorder, - counterText: null, - counterStyle: null, - helperStyle: TextStyle( - height: 0.0, - color: Colors.transparent, - ), - labelStyle: TextStyle(height: 0.1), - fillColor: Colors.transparent, - border: InputBorder.none, - ), + contentPadding: EdgeInsets.all(0), + focusedErrorBorder: transparentBorder, + errorBorder: transparentBorder, + disabledBorder: transparentBorder, + enabledBorder: transparentBorder, + focusedBorder: transparentBorder, + counterText: null, + counterStyle: null, + helperStyle: TextStyle(height: 0.0, color: Colors.transparent), + labelStyle: TextStyle(height: 0.1), + fillColor: Colors.transparent, + border: InputBorder.none), cursorColor: Colors.transparent, showCursor: false, maxLength: widget.maxLength, @@ -295,83 +287,195 @@ class OTPWidgetState extends State with SingleTickerProviderStateMixi List pinCodes = List.generate(widget.maxLength, (int i) { return _buildPinCode(i, context); }); - return Row( - children: pinCodes, - mainAxisSize: MainAxisSize.min, - mainAxisAlignment: MainAxisAlignment.spaceBetween, + return SingleChildScrollView( + // Add this + scrollDirection: Axis.horizontal, // For horizontal scrolling + child: Row( + children: pinCodes, + mainAxisSize: MainAxisSize.min, // Important when inside a scroll view + mainAxisAlignment: MainAxisAlignment.start, // Or another suitable alignment + ), ); } + // + // Widget _pinBoxRow(BuildContext context) { + // _calculateStrList(); + // List pinCodes = List.generate(widget.maxLength, (int i) { + // return _buildPinCode(i, context); + // }); + // return Row( + // children: pinCodes, + // mainAxisSize: MainAxisSize.min, + // mainAxisAlignment: MainAxisAlignment.spaceBetween, + // ); + // } + Widget _buildPinCode(int i, BuildContext context) { - Color borderColor; - Color pinBoxColor = widget.pinBoxColor; + final bool isFilled = i < text.length; + final bool isCurrent = i == currentIndex; + final bool isFocused = hasFocus && isCurrent; + + // Colors based on state + Color bgColor = Colors.white; + Color borderColor = widget.defaultBorderColor; + Color textColor = Colors.black; if (widget.hasError) { borderColor = widget.errorBorderColor; - } else if (i < text.length) { - borderColor = widget.textBorderColor; - } else { - borderColor = widget.defaultBorderColor; - pinBoxColor = widget.pinBoxColor; + bgColor = Colors.red.shade50; + } else if (isFocused) { + borderColor = Colors.transparent; + bgColor = Colors.white; + textColor = Colors.white; + } else if (isFilled) { + borderColor = Colors.green; + bgColor = Colors.green; + textColor = Colors.white; } - EdgeInsets insets; - if (i == 0) { - insets = EdgeInsets.only( - left: 0, - top: widget.pinBoxOuterPadding.top, - right: widget.pinBoxOuterPadding.right, - bottom: widget.pinBoxOuterPadding.bottom, - ); - } else if (i == strList.length - 1) { - insets = EdgeInsets.only( - left: widget.pinBoxOuterPadding.left, - top: widget.pinBoxOuterPadding.top, - right: 0, - bottom: widget.pinBoxOuterPadding.bottom, - ); - } else { - insets = widget.pinBoxOuterPadding; - } return Container( key: ValueKey("container$i"), alignment: Alignment.center, - padding: EdgeInsets.symmetric(vertical: 4.0, horizontal: 1.0), - margin: insets, - child: _animatedTextBox(strList[i], i), + margin: widget.pinBoxOuterPadding, decoration: BoxDecoration( + color: bgColor, border: Border.all( color: borderColor, width: widget.pinBoxBorderWidth, ), - color: pinBoxColor, - borderRadius: BorderRadius.circular(widget.pinBoxRadius), + borderRadius: BorderRadius.circular(16), // Rounded edges ), width: widget.pinBoxWidth, height: widget.pinBoxHeight, + child: _animatedTextBox( + strList[i], + i, + textColor, + ), ); } - Widget _animatedTextBox(String text, int i) { + // Widget _buildPinCode(int i, BuildContext context) { + // Color borderColor; + // Color pinBoxColor = widget.pinBoxColor; + // + // if (widget.hasError) { + // borderColor = widget.errorBorderColor; + // } else if (i < text.length) { + // borderColor = widget.textBorderColor; + // } else { + // borderColor = widget.defaultBorderColor; + // pinBoxColor = widget.pinBoxColor; + // } + // + // EdgeInsets insets; + // if (i == 0) { + // insets = EdgeInsets.only( + // left: 0, + // top: widget.pinBoxOuterPadding.top, + // right: widget.pinBoxOuterPadding.right, + // bottom: widget.pinBoxOuterPadding.bottom, + // ); + // } else if (i == strList.length - 1) { + // insets = EdgeInsets.only( + // left: widget.pinBoxOuterPadding.left, + // top: widget.pinBoxOuterPadding.top, + // right: 0, + // bottom: widget.pinBoxOuterPadding.bottom, + // ); + // } else { + // insets = widget.pinBoxOuterPadding; + // } + // return Container( + // key: ValueKey("container$i"), + // alignment: Alignment.center, + // // padding: EdgeInsets.symmetric(vertical: 4.0, horizontal: 1.0), + // margin: insets, + // child: _animatedTextBox(strList[i], i), + // decoration: BoxDecoration( + // border: Border.all( + // color: borderColor, + // width: widget.pinBoxBorderWidth, + // ), + // color: pinBoxColor, + // borderRadius: BorderRadius.circular(widget.pinBoxRadius), + // ), + // width: widget.pinBoxWidth, + // height: widget.pinBoxHeight, + // ); + // } + + // Widget _animatedTextBox(String text, int i) { + // if (widget.pinTextAnimatedSwitcherTransition != null) { + // return AnimatedSwitcher( + // duration: widget.pinTextAnimatedSwitcherDuration, + // transitionBuilder: widget.pinTextAnimatedSwitcherTransition ?? + // (Widget child, Animation animation) { + // return child; + // }, + // child: Text( + // text, + // key: ValueKey("$text$i"), + // style: widget.pinTextStyle, + // ), + // ); + // } else { + // return Text( + // text, + // key: ValueKey("${strList[i]}$i"), + // style: widget.pinTextStyle, + // ); + // } + // } + + Widget _animatedTextBox(String text, int i, Color textColor) { + final bool isFilled = text.isNotEmpty; + + final double fontSize = isFilled ? 64 : 64; // Increased when filled + final FontWeight fontWeight = isFilled ? FontWeight.w600 : FontWeight.normal; + if (widget.pinTextAnimatedSwitcherTransition != null) { return AnimatedSwitcher( duration: widget.pinTextAnimatedSwitcherDuration, - transitionBuilder: widget.pinTextAnimatedSwitcherTransition ?? - (Widget child, Animation animation) { - return child; - }, + transitionBuilder: widget.pinTextAnimatedSwitcherTransition!, child: Text( text, key: ValueKey("$text$i"), - style: widget.pinTextStyle, + style: widget.pinTextStyle?.copyWith(color: textColor, fontSize: fontSize, fontWeight: fontWeight, fontFamily: context.fontFamily) ?? + TextStyle(color: textColor, fontSize: fontSize, fontWeight: fontWeight, fontFamily: context.fontFamily), ), ); } else { return Text( text, key: ValueKey("${strList[i]}$i"), - style: widget.pinTextStyle, + style: widget.pinTextStyle?.copyWith(color: textColor, fontSize: fontSize, fontWeight: fontWeight, fontFamily: context.fontFamily) ?? + TextStyle(color: textColor, fontSize: fontSize, fontWeight: fontWeight, fontFamily: context.fontFamily), ); } } + +// +// Widget _animatedTextBox(String text, int i, Color textColor) { +// if (widget.pinTextAnimatedSwitcherTransition != null) { +// return AnimatedSwitcher( +// duration: widget.pinTextAnimatedSwitcherDuration, +// transitionBuilder: widget.pinTextAnimatedSwitcherTransition!, +// child: Text( +// text, +// key: ValueKey("$text$i"), +// style: widget.pinTextStyle?.copyWith(color: textColor) ?? +// TextStyle(color: textColor, fontSize: 24, fontWeight: FontWeight.bold), +// ), +// ); +// } else { +// return Text( +// text, +// key: ValueKey("${strList[i]}$i"), +// style: widget.pinTextStyle?.copyWith(color: textColor) ?? +// TextStyle(color: textColor, fontSize: 24, fontWeight: FontWeight.bold), +// ); +// } +// } }