You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
car_provider_app/lib/widgets/dialog/otp_dialog.dart

162 lines
5.1 KiB
Dart

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/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<OtpDialog> createState() => _OtpDialogState();
}
class _OtpDialogState extends State<OtpDialog> {
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(),
width: double.infinity,
onPressed: () {
widget.onClick(code);
},
)
],
),
);
}
_onOtpCallBack(String otpCode, bool? isAutofill) {
if (otpCode.length == 4) {
// onSuccess(otpCode);
code = otpCode;
}
}
}