import 'package:easy_localization/easy_localization.dart'; import 'package:flutter/material.dart'; import 'package:mc_common_app/extensions/int_extensions.dart'; import 'package:mc_common_app/extensions/string_extensions.dart'; import 'package:mc_common_app/generated/locale_keys.g.dart'; import 'package:mc_common_app/theme/colors.dart'; import 'package:mc_common_app/widgets/count_down_timer.dart'; import 'package:mc_common_app/widgets/button/show_fill_button.dart'; import '../otp_widget.dart'; class OtpDialog extends StatefulWidget { String? userName; Function(String) onClick; OtpDialog({Key? key, required this.onClick, this.userName}) : super(key: key); @override State createState() => _OtpDialogState(); } class _OtpDialogState extends State { String code = ""; bool hasTimerStopped = false; final TextEditingController _pinPutController = TextEditingController(); @override Widget build(BuildContext context) { return Container( color: Colors.white, padding: const EdgeInsets.all(24), width: double.infinity, child: Column( mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center, children: [ LocaleKeys.insert_otp_code.tr().toText( height: 23 / 24, fontSize: 24, letterSpacing: -1.44, ), 8.height, LocaleKeys.type_code.tr().toText(color: MyColors.textColor, fontSize: 12), if (widget.userName != null) (widget.userName ?? "").toText( color: MyColors.darkPrimaryColor, fontSize: 12, ), 20.height, Center( child: OTPWidget( autoFocus: true, controller: _pinPutController, defaultBorderColor: const Color(0xffD8D8D8), maxLength: 4, onTextChanged: (text) {}, pinBoxColor: Colors.white, onDone: (code) => _onOtpCallBack(code, null), textBorderColor: MyColors.darkPrimaryColor, pinBoxWidth: 48, pinBoxHeight: 48, pinTextStyle: const TextStyle(fontSize: 24.0, color: MyColors.darkTextColor), pinTextAnimatedSwitcherTransition: ProvidedPinBoxTextAnimation.scalingTransition, pinTextAnimatedSwitcherDuration: const Duration(milliseconds: 300), pinBoxRadius: 0, keyboardType: TextInputType.number, ), ), 40.height, ShowFillButton( title: LocaleKeys.check_code.tr(), maxWidth: double.infinity, onPressed: () { widget.onClick(code); }, ), if (!hasTimerStopped) Padding( padding: const EdgeInsets.all(12.0), child: Row( crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center, children: [ Text(LocaleKeys.time_will_expire.tr() + " "), CountDownTimer( secondsRemaining: 60, whenTimeExpires: () { setState(() { hasTimerStopped = true; }); }, countDownTimerStyle: const TextStyle( color: Colors.blue, height: 1.2, ), ), Text(" " + LocaleKeys.sec.tr()), ], ), ), if (hasTimerStopped) InkWell( onTap: () { setState(() { hasTimerStopped = false; }); }, child: Padding( padding: const EdgeInsets.all(12.0), child: Text( LocaleKeys.resend_code.tr(), style: const TextStyle( decoration: TextDecoration.underline, fontWeight: FontWeight.bold, color: Colors.blue, ), ), ), ), ], ), ); } _onOtpCallBack(String otpCode, bool? isAutofill) { if (otpCode.length == 4) { // onSuccess(otpCode); code = otpCode; } } }