这是我的屏幕,最初会显示文本“为您的以 XXXX 结尾的卡设置 PIN”。当用户输入 PIN 码的第 4 位数字时,屏幕会自动将此文本更改为重新输入您的 PIN 码以确认。当屏幕发生变化时,我想比较两个 PIN 码以检查它们是否相同。如果 PIN 码不同,则在此处显示文本。
请记住,我使用的是相同的 PinFieldAutoFill 小部件。基于此,我想设置并确认PIN。
设置 Pin 图
重新输入密码屏幕
如何做?请帮助我,我已经尝试了 3 天了。这是我的 SetPinTest 屏幕:
class _SetPinTestscreenState extends State<SetPinTestscreen> {
TextEditingController setPinController = TextEditingController();
@override
void initState() {
Provider.of<PinValidationProvider>(context, listen: false).isPinSet = false;
super.initState();
}
@override
Widget build(BuildContext context) {
return MainTemplate(
isFloatingButtonVisible: true,
floatingButtonAction: () {},
child: Padding(
padding: const EdgeInsets.all(15.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Align(
alignment: Alignment.centerLeft,
child: Consumer<PinValidationProvider>(
builder: (context, pinProvider, child) {
return Text(
pinProvider.isPinSet
? 'Re-enter your PIN code to Confirm'
: 'Set PIN for your Card Ending With XXXX',
style: TextStyle(fontWeight: FontWeight.w700, fontSize: 30),
);
},
),
),
SizedBox(height: 20),
Center(
child: PinFieldAutoFill(
decoration: UnderlineDecoration(
textStyle: Theme.of(context).textTheme.subtitle1.copyWith(
fontWeight: FontWeight.bold,
fontSize: 15,
),
gapSpace: 8,
lineHeight: 1.2,
colorBuilder:
PinListenColorBuilder(Colors.black, Colors.grey.shade400),
),
onCodeChanged: (value) {
Provider.of<PinValidationProvider>(context, listen: false)
.validatePin(value, setPinController);
},
codeLength: 4,
cursor: Cursor(color: Colors.black, enabled: true),
controller: setPinController,
keyboardType: TextInputType.number,
),
),
SizedBox(height: 20),
Consumer<PinValidationProvider>(
builder: (context, provider, child) {
final textColor =
provider.isInvalidPin ? Colors.red : Colors.black;
return provider.isPinSet
? SizedBox.shrink()
: Text(
'Pin must be at least 4 digits. It must not be single digits like'
' 1111 or digits in numerical order such as 1234',
style: TextStyle(
color: textColor,
),
);
}),
],
),
),
);
}
}
这是我的 PinValidationProvider 类
class PinValidationProvider extends ChangeNotifier {
bool _isInvalidPin = false;
bool get isInvalidPin => _isInvalidPin;
bool isPinSet = false;
String pin = '';
String confirmedPin = '';
void validatePin(String pin,TextEditingController controller) {
if (pin.length != 4) {
_isInvalidPin = false;
pin = pin ?? '';
} else {
confirmedPin = pin ?? '';
controller.clear();
if (_isSimpleSequence(pin) || _isRepeatedDigit(pin)) {
_isInvalidPin = true;
} else {
_isInvalidPin = false;
if (!isPinSet) {
isPinSet = true;
}
}
}
Future.microtask(() {
notifyListeners();
});
}
bool _isSimpleSequence(String pin) {
for (int i = 0; i < pin.length - 1; i++) {
int digit1 = int.parse(pin[i]);
int digit2 = int.parse(pin[i + 1]);
if (digit2 - digit1 == 1) {
return true;
}
}
return false;
}
bool _isRepeatedDigit(String pin) {
for (int i = 0; i < pin.length - 1; i++) {
if (pin[i] == pin[i + 1]) {
return true;
}
}
return false;
}
}
为您的以 XXXX 结尾的卡设置 PIN 码或重新输入您的 PIN 码进行确认。并且您在提供程序中确实有 pin 和confirmedPin 的变量。
因此,您需要做的是,如果!pinProvider.isPinSet
表示为您的以XXXX结尾的卡设置PIN码屏幕,您需要将用户输入的PIN码保存在PIN码中,否则将其保存在confirmedPin中,并且在confirmedPin达到4的长度后,然后调用您的提供商的
validatePin
函数并检查它们。并相应地执行某些操作。这整个过程您需要在
onCodeChanged
的
PinFieldAutoFill
中完成。