import 'package:car_provider_app/classes/colors.dart'; import 'package:car_provider_app/theme/colors.dart'; import 'package:car_provider_app/utils/navigator.dart'; import 'package:car_provider_app/utils/utils.dart'; import 'package:car_provider_app/widgets/button/show_fill_button.dart'; import 'package:car_provider_app/extensions/string_extensions.dart'; import 'package:car_provider_app/extensions/int_extensions.dart'; import 'package:easy_localization/easy_localization.dart'; import 'package:flutter/material.dart'; import '../../generated/locale_keys.g.dart'; import '../count_down_timer.dart'; import '../otp_widget.dart'; class OtpDialog extends StatefulWidget { Function(String) onClick; OtpDialog({required this.onClick}); @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: EdgeInsets.all(24), width: double.infinity, child: Column( mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.start, children: [ LocaleKeys.insert_otp_code.tr().toText24(), 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: const Color(0xffD8D8D8), pinBoxWidth: 48, pinBoxHeight: 48, pinTextStyle: const TextStyle(fontSize: 24.0, color: MyColors.darkTextColor), pinTextAnimatedSwitcherTransition: ProvidedPinBoxTextAnimation.scalingTransition, pinTextAnimatedSwitcherDuration: const Duration(milliseconds: 300), pinBoxRadius: 8, keyboardType: TextInputType.number, ), ), // Row( // children: [ // Expanded( // child: Container( // width: double.infinity, // height: 60, // color: accentColor.withOpacity(0.3), // ), // ), // 12.width, // Expanded( // child: Container( // width: double.infinity, // height: 60, // color: accentColor.withOpacity(0.3), // ), // ), // 12.width, // Expanded( // child: Container( // width: double.infinity, // height: 60, // color: accentColor.withOpacity(0.3), // ), // ), // 12.width, // Expanded( // child: Container( // width: double.infinity, // height: 60, // color: accentColor.withOpacity(0.3), // ), // ), // ], // ), if (!hasTimerStopped) Padding( padding: const EdgeInsets.all(12.0), child: Row( children: [ Expanded( child: Text(LocaleKeys.time_will_expire.tr()), ), CountDownTimer( secondsRemaining: 60, whenTimeExpires: () { setState(() { hasTimerStopped = true; }); }, countDownTimerStyle: TextStyle( color: Colors.blue, fontSize: 17.0, height: 1.2, ), ), ], ), ), if (hasTimerStopped) Align( alignment: Alignment.topRight, child: InkWell( onTap: () { setState(() { hasTimerStopped = false; }); }, child: Padding( padding: const EdgeInsets.all(12.0), child: Text( LocaleKeys.resend_code.tr(), style: TextStyle( decoration: TextDecoration.underline, fontWeight: FontWeight.bold, color: Colors.blue, ), ), ), ), ), 40.height, ShowFillButton( title: LocaleKeys.check_code.tr(), maxWidth: double.infinity, onPressed: () { widget.onClick(code); }, ) ], ), ); } _onOtpCallBack(String otpCode, bool? isAutofill) { if (otpCode.length == 4) { // onSuccess(otpCode); code = otpCode; } } }