Tuesday, September 26, 2023

Best Masked text input formatter for flutter

Masked text input formatter for flutter.It support currency ,telephone etc.The package provides TextInputFormatter for TextField and TextFormField which format the input by a given mask.

Example

Check ‘example’ folder for code sample

example

Usage

  1. Follow the install guide
  2. Import the library:
import 'package:mask_text_input_formatter/mask_text_input_formatter.dart';
  1. Create mask formatter:
var maskFormatter = new MaskTextInputFormatter(mask: '+# (###) ###-##-##', filter: { "#": RegExp(r'[0-9]') });
  1. Set it to text field:
TextField(inputFormatters: [maskFormatter])

Get value

Get masked text:

print(maskFormatter.getMaskedText()); // -> "+0 (123) 456-78-90"

Get unmasked text:

print(maskFormatter.getUnmaskedText()); // -> 01234567890

Change the mask

You can use the updateMask method to change the mask after the formatter was created:

var textEditingController = TextEditingController(text: "12345678");
var maskFormatter = new MaskTextInputFormatter(mask: '####-####', filter: { "#": RegExp(r'[0-9]') });

TextField(controller: textEditingController, inputFormatters: [maskFormatter])  // -> "1234-5678"

textEditingController.value = maskFormatter.updateMask(mask: "##-##-##-##"); // -> "12-34-56-78"