Flutter – formatting phone number text field

Question

I am trying to make a text field that properly formats a phone number. I have tried using

NumberFormat(\"+# ### ### ####\");

But it doesn\'t ret

Answer 1

(US only but easily modifiable) I would recommend only storing digits in your model and formatting the number specifically for the view. For that, I did the following:

/// Human readable version of the phone number
String getFormattedPhoneNumber() {
  if (_phoneNumber.isEmpty) {
    return "";
  }

  String phoneNumber = _phoneNumber;
  bool addPlus = phoneNumber.startsWith("1");
  if (addPlus) phoneNumber = phoneNumber.substring(1);
  bool addParents = phoneNumber.length >= 3;
  bool addDash = phoneNumber.length >= 8;

  // +1
  String updatedNumber = "";
  if (addPlus) updatedNumber += "+1";

  // (222)
  if (addParents) {
    updatedNumber += "(";
    updatedNumber += phoneNumber.substring(0, 3);
    updatedNumber += ")";
  } else {
    updatedNumber += phoneNumber.substring(0);
    return updatedNumber;
  }

  // 111
  if (addDash) {
    updatedNumber += phoneNumber.substring(3, 6);
    updatedNumber += "-";
  } else {
    updatedNumber += phoneNumber.substring(3);
    return updatedNumber;
  }

  // 3333
  updatedNumber += phoneNumber.substring(6);
  return updatedNumber;
}

And in your TextInput onChanged method:

void setPhoneNumber(String phoneNumber) {
  if (phoneNumber.contains("\(") && !phoneNumber.contains("\)")) {
    // Remove the digit the user wanted to remove but couldn't b/c a paren
    // was in the way.
    phoneNumber = phoneNumber.substring(0, phoneNumber.length - 1);
  }

  // Only store the actual digits
  phoneNumber = phoneNumber.replaceAll(RegExp("[^0-9]"), "");

  // Don't let the user enter more digits than is possible
  int maxLength = phoneNumber.startsWith("1") ? 11 : 10;
  if (phoneNumber.length > maxLength) {
    phoneNumber = phoneNumber.substring(0, maxLength);
  }

  model.setPhoneNumber(phoneNumber);
  
  // Notify the UI to update based on new input
  notifyListeners();
}