How to add a mask in a TextField in Flutter? - dart

Question

I'm trying to add a date mask to a textField since I did not like the Date Picker because for date of birth, for example, it is not as nimble.
After that, converting from string to datetime, I believe I can continue the project,
Thanks in advance.
static final TextEditingController _birthDate = new TextEditingController();
new TextFormField(
controller: _birthDate,
maxLength: 10,
keyboardType: TextInputType.datetime,
validator: _validateDate
), String _validateDate(String value) {
if(value.isEmpty)
return null;
if(value.length != 10)
return 'Enter date in DD / MM / YYYY format';
return null;
}

Answer 1

I modified some things and managed to get the expected result.
I created this class to define the variable
static final _UsNumberTextInputFormatter _birthDate = new _UsNumberTextInputFormatter();
class _UsNumberTextInputFormatter extends TextInputFormatter {
#override
TextEditingValue formatEditUpdate(
TextEditingValue oldValue,
TextEditingValue newValue ) {
final int newTextLength = newValue.text.length;
int selectionIndex = newValue.selection.end;
int usedSubstringIndex = 0;
final StringBuffer newText = new StringBuffer();
if (newTextLength >= 3) {
newText.write(newValue.text.substring(0, usedSubstringIndex = 2) + '/');
if (newValue.selection.end >= 2)
selectionIndex ++;
}
if (newTextLength >= 5) {
newText.write(newValue.text.substring(2, usedSubstringIndex = 4) + '/');
if (newValue.selection.end >= 4)
selectionIndex++;
}
if (newTextLength >= 9) {
newText.write(newValue.text.substring(4, usedSubstringIndex = 8));
if (newValue.selection.end >= 8)
selectionIndex++;
}
// Dump the rest.
if (newTextLength >= usedSubstringIndex)
newText.write(newValue.text.substring(usedSubstringIndex));
return new TextEditingValue(
text: newText.toString(),
selection: new TextSelection.collapsed(offset: selectionIndex),
);
}
}
And finally I added an inputformat to the textfield
new TextFormField(
maxLength: 10,
keyboardType: TextInputType.datetime,
validator: _validateDate,
decoration: const InputDecoration(
hintText: 'Digite sua data de nascimento',
labelText: 'Data de Nascimento',
),
inputFormatters: <TextInputFormatter> [
WhitelistingTextInputFormatter.digitsOnly,
// Fit the validating format.
_birthDate,
]
),
Now it's all right, thank you

Answer 2

https://pub.dartlang.org/packages/masked_text
masked_text
A package for masked texts, so if you want a mask for phone, or zip code or any kind of mask, just use it :D
Getting Started
It's very simple, it's a Widget as all the other ones.
new MaskedTextField
(
maskedTextFieldController: _textCPFController,
mask: "xx/xx/xxxx",
maxLength: 10,
keyboardType: TextInputType.number,
inputDecoration: new InputDecoration(
hintText: "Type your birthdate", labelText: "Date"),
);
'x' is the normal char that your text will have.
this sample reproduces something like this in the end: 11/02/1995.

Answer 3

My solution:
class MaskTextInputFormatter extends TextInputFormatter {
final int maskLength;
final Map<String, List<int>> separatorBoundries;
MaskTextInputFormatter({
String mask = "xx.xx.xx-xxx.xx",
List<String> separators = const [".", "-"],
}) : this.separatorBoundries = {
for (var v in separators)
v: mask.split("").asMap().entries.where((entry) => entry.value == v).map((e) => e.key).toList()
},
this.maskLength = mask.length;
#override
TextEditingValue formatEditUpdate(TextEditingValue oldValue, TextEditingValue newValue) {
final int newTextLength = newValue.text.length;
final int oldTextLength = oldValue.text.length;
// removed char
if (newTextLength < oldTextLength) return newValue;
// maximum amount of chars
if (oldTextLength == maskLength) return oldValue;
// masking
final StringBuffer newText = StringBuffer();
int selectionIndex = newValue.selection.end;
// extra boundaries check
final separatorEntry1 = separatorBoundries.entries.firstWhereOrNull((entry) => entry.value.contains(oldTextLength));
if (separatorEntry1 != null) {
newText.write(oldValue.text + separatorEntry1.key);
selectionIndex++;
} else {
newText.write(oldValue.text);
}
// write the char
newText.write(newValue.text[newValue.text.length - 1]);
return TextEditingValue(
text: newText.toString(),
selection: TextSelection.collapsed(offset: selectionIndex),
);
}
}

Answer 4

This solution checks when date is out of range (eg. there is not month like 13). It's super inefficient, but it works.
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
class DateFormatter extends TextInputFormatter {
final String mask = 'xx-xx-xxxx';
final String separator = '-';
#override
TextEditingValue formatEditUpdate(TextEditingValue oldValue, TextEditingValue newValue) {
if(newValue.text.length > 0) {
if(newValue.text.length > oldValue.text.length) {
String lastEnteredChar = newValue.text.substring(newValue.text.length-1);
if(!_isNumeric(lastEnteredChar)) return oldValue;
if(newValue.text.length > mask.length) return oldValue;
if(newValue.text.length < mask.length && mask[newValue.text.length - 1] == separator) {
String value = _validateValue(oldValue.text);
print(value);
return TextEditingValue(
text: '$value$separator$lastEnteredChar',
selection: TextSelection.collapsed(
offset: newValue.selection.end + 1,
),
);
}
if(newValue.text.length == mask.length) {
return TextEditingValue(
text: '${_validateValue(newValue.text)}',
selection: TextSelection.collapsed(
offset: newValue.selection.end,
),
);
}
}
}
return newValue;
}
bool _isNumeric(String s) {
if(s == null) return false;
return double.parse(s, (e) => null) != null;
}
String _validateValue(String s) {
String result = s;
if (s.length < 4) { // days
int num = int.parse(s.substring(s.length-2));
String raw = s.substring(0, s.length-2);
if (num == 0) {
result = raw + '01';
} else if (num > 31) {
result = raw + '31';
} else {
result = s;
}
} else if (s.length < 7) { // month
int num = int.parse(s.substring(s.length-2));
String raw = s.substring(0, s.length-2);
if (num == 0) {
result = raw + '01';
} else if (num > 12) {
result = raw + '12';
} else {
result = s;
}
} else { // year
int num = int.parse(s.substring(s.length-4));
String raw = s.substring(0, s.length-4);
if (num < 1950) {
result = raw + '1950';
} else if (num > 2006) {
result = raw + '2006';
} else {
result = s;
}
}
print(result);
return result;
}
}

Answer 5

You can now use the boolean property, "obscureText" of TextField to mask input.