I want to change this screen’s below text in black
and secondly when I type digit the below text shows that Entered PIN does not match
. instead it shows me after when i complete typed mis-match PIN if i type correct PIN then this Text Pin must be at least 4 digits. It must not....
should show in black color.
Here is my full code
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(
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 to Activate your 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 || !provider.isPinMatched
? Colors.red
: Colors.black;
if (!provider.isPinMatched &&
provider.isPinSet &&
setPinController.text.isNotEmpty) {
return Text(
'Entered PIN does not match.',
style: TextStyle(
color: Colors.red,
),
);
} else {
return 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,
),
);
}
},
),
],
),
),
);
}
}
Here is my PinValidationProvider class:
class PinValidationProvider extends ChangeNotifier {
bool _isInvalidPin = false;
bool get isInvalidPin => _isInvalidPin;
bool get isPinMatched => confirmedPin == pin;
bool isPinSet = false;
String pin = '';
String confirmedPin = '';
void validatePin(String pin, TextEditingController controller) {
if (pin.length != 4) {
_isInvalidPin = false;
} else {
if (_isSimpleSequence(pin) || _isRepeatedDigit(pin)) {
_isInvalidPin = true;
} else {
_isInvalidPin = false;
if (!isPinSet) {
isPinSet = true;
this.pin = pin;
} else {
confirmedPin = pin;
}
}
if (confirmedPin != this.pin) {
controller.clear();
}
}
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;
}
}
2
Answers
1st
as i am able to understand that you want to change color of Text("Pin must be at least 4 digits. It must not be single…..") then you have to set it from Text style attribut, ex-
2nd-
First:
if you want to change the color of "Pin must be at least 4 digits…" text. change to color property Colors.black instead textColor.
secondly: To achieve
You need add and extra validator to if block, to control user type at least 4 digits.