Haroon6138
/
HMG_Patient_App
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

otp Design.

Browse Source
updare-to-3.32.sultan
Aamir Muhammad 4 months ago
parent fdc97c08a9
commit 288f10a93e
3 changed files with 338 additions and 134 deletions
Show Stats Download Patch File Download Diff File

2
lib/pages/login/welcome.dart
Unescape Escape View File

@ -320,6 +320,7 @@ class _WelcomeLogin extends State<WelcomeLogin> {
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<WelcomeLogin> {
authenticatedUserObject: authenticatedUserObject,
appointmentRateViewModel: appointmentRateViewModel,
selectedOption: selectedOption,
isArabic: projectViewModel.isArabic,
),
),

234
lib/widgets/otp/sms-popup.dart
Unescape Escape View File

@ -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>[
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>[
// 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);

236
lib/widgets/otp_widget.dart
Unescape Escape View File

@ -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<OTPWidget> with SingleTickerProviderStateMixin {
late AnimationController _highlightAnimationController;
late AnimationController _highlightAnimationController;
late FocusNode focusNode;
String text = "";
int currentIndex = 0;
@ -195,6 +196,7 @@ class OTPWidgetState extends State<OTPWidget> with SingleTickerProviderStateMixi
@override
Widget build(BuildContext context) {
return Stack(
fit: StackFit.loose,
children: <Widget>[
_otpTextInput(),
_touchPinBoxRow(),
@ -223,10 +225,7 @@ class OTPWidgetState extends State<OTPWidget> 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<OTPWidget> with SingleTickerProviderStateMixi
controller: widget.controller,
keyboardType: widget.keyboardType,
inputFormatters: widget.keyboardType == TextInputType.number ? <TextInputFormatter>[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<OTPWidget> with SingleTickerProviderStateMixi
List<Widget> 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<Widget> 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<String>("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<String>("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<double> animation) {
// return child;
// },
// child: Text(
// text,
// key: ValueKey<String>("$text$i"),
// style: widget.pinTextStyle,
// ),
// );
// } else {
// return Text(
// text,
// key: ValueKey<String>("${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<double> animation) {
return child;
},
transitionBuilder: widget.pinTextAnimatedSwitcherTransition!,
child: Text(
text,
key: ValueKey<String>("$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<String>("${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<String>("$text$i"),
// style: widget.pinTextStyle?.copyWith(color: textColor) ??
// TextStyle(color: textColor, fontSize: 24, fontWeight: FontWeight.bold),
// ),
// );
// } else {
// return Text(
// text,
// key: ValueKey<String>("${strList[i]}$i"),
// style: widget.pinTextStyle?.copyWith(color: textColor) ??
// TextStyle(color: textColor, fontSize: 24, fontWeight: FontWeight.bold),
// );
// }
// }
}

Write Preview
Loading…
Cancel
Save