This package provides a TextEditingController for TextField and TextFormField which format the input text by a costumized mask (or multiple masks) saving the cursor position.
- Add example
- Add the dependency into pubspec.yaml.
dependencies:
text_masking_controller:
git:
url: https://github.com/Nicollas1705/text_masking_controller
ref: master
- Import the library:
import 'package:text_masking_controller/text_masking_controller.dart';
- Create the controller:
final controller = TextMaskingController(mask: "00/00/0000");
- Set the controller to the TextField (or TextFormField):
TextField(controller: controller),
Input text: 01012000
Output text: 01/01/2000
final controller = TextMaskingController(
masks: ["000.000.000-00", "00.000.000/0000-00"],
);
To set a Map filter, use the key (example: "_") and the regex pattern (example: r'[01]').
final controller = TextMaskingController(
mask: "_ _ _ _",
filters: {"_": r'[01]'}, // Binary code
);
final controller = TextMaskingController(
masks: ["(00) 00000-0000"],
initialText: "12345678901", // Result: (12) 34567-8901
);
It will complete the mask as quick as possible:
Mask example: "00--00".
When input only 2 numbers ("12"), the result will be: "12--|" (the cursor will go to the final).
Note: The cursor is represented by this character: "|" (pipe).
final controller = TextMaskingController(
mask: "+00 (00) 00000-0000",
maskAutoComplete: MaskAutoComplete.quick,
initialText: "1234", // Result: +12 (34)
);
Use the "mask" parameter to update to a single mask.
Use the "masks" parameter to update to a multiple masks.
controller.updateMask(mask: "000-000");
controller.updateText("123456");
Map<String, String> defaultFilters = TextMaskingController.defaultFilters;
It will returns the mask being used by the current text.
It can be null because the "mask" and "masks" parameters can be null.
String? mask = controller.currentMask;
Mask example: "00-00-00".
Input example: "123456" (resulting: "12-34-56").
The unmasked text will be: "123456".
String text = controller.unmaskedText;
Masks example: ["00-00", "0000-0000"].
Input example: "1234" (resulting: "12-34"). This is filled.
Input example: "123456" (resulting: "1234-56"). This is not filled.
bool filled = controller.isFilled;
Key | Regex pattern | Description |
---|---|---|
0 | [0-9] | Only numbers |
A | [A-Z] | Upper case letters |
a | [a-z] | Lower case letters |
@ | [a-zA-Z] | Any case letters |
* | .* | Any character |
final cpfAndCnpj = TextMaskingController(
masks: ["000.000.000-00", "00.000.000/0000-00"],
);
final brazilianPhones = TextMaskingController(
masks:
"+00 (00) 00000-0000",
"+00 (00) 0000-0000",
"(00) 00000-0000",
"(00) 0000-0000",
"00000-0000",
"0000-0000",
],
);
final date = TextMaskingController(mask: "00/00/0000");
This package was developed based on flutter_masked_text2 and mask_text_input_formatter packages.
Just set the "masks" parameter to update the mask according to the text size.
The cursor will be saved even if it changes the mask from masks parameter.
Masks example: ["00-00", "000-000", "0000-0000"].
Note: The cursor will be represented by this character: "|" (pipe).
Result text from an input: "12-|34". If the user add some number (example: "123"), the result will be: "1212-3|34".
Adding each character ("123"):
Text | Input | Result |
---|---|---|
"12-|34" | "1" | "121-|34" |
"121-|34" | "2" | "121-2|34" |
"121-2|34" | "3" | "1212-3|34" |
Nowadays, the code doesn't convert the letter case.
Example:
final controller = TextMaskingController(
mask: "AAA",
);
If the user types "abc" (lower case), the text will not be insert. It will only be insert if the user type upper case letters.
[ ] Make a way to update the mask automatically based on the first digits (not only by the text size).
Example:
final controller = TextMaskingController(
masks: ["A-00", "B-0000", "C-000000"],
filters: {
"A": r'[A]',
"B": r'[B]',
"C": r'[C]',
"0": r'[0-9]',
},
);
If the user starts typing "A", it will be only able to type 2 more numbers. If starts with "B", 4 more numbers. If starts with "C", 6 more numbers.