Flutter Text Form Field Phone Number Mask

Question

I want to print the phone number written in the text form field like this;

xxxx-xxx-xxxx

but I want to do this without using any packages. Can you help me?

Answer 1

You can use the obscureText: true parameter like this:

            const Form(
          child: TextField(
            obscureText: true,
          ),
        ),

There is a video for this: enter link description here

Answer 2

You can try with the InputTextFormatter

class MyWidget extends StatelessWidget {
  final _mobileFormatter = PhoneNumberTextInputFormatter();
  @override
  Widget build(BuildContext context) {
    return TextFormField(
      keyboardType: TextInputType.number,
      maxLength: 13,
      inputFormatters:[
        FilteringTextInputFormatter.digitsOnly,
        _mobileFormatter,
      ],
      decoration: InputDecoration(
        icon: Icon(Icons.phone_iphone),
        hintText: "Mobile*",
      ),
    );
  }
}

class PhoneNumberTextInputFormatter 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 >= 5) {
      newText.write(newValue.text.substring(0, usedSubstringIndex = 4) +'-' );
      if (newValue.selection.end >= 5)
        selectionIndex += 3;
    }
    if (newTextLength >= 7) {
      newText.write(newValue.text.substring(4, usedSubstringIndex = 7) );
      if (newValue.selection.end >= 7)
        selectionIndex++;
    }
    if (newTextLength >= 8) {
      newText.write('-'+newValue.text.substring(7, usedSubstringIndex = 8) );
      if (newValue.selection.end >= 11)
        selectionIndex++;
    }
    if (newTextLength >= usedSubstringIndex)
      newText.write(newValue.text.substring(usedSubstringIndex));
    return new TextEditingValue(
      text: newText.toString(),
      selection: new TextSelection.collapsed(offset: newText.length),
    );
  }
}

output: