How to format FirebaseFirestore Phone field with Mask when retrieved in Flutter App

21 Views Asked by At

I am building Flutter Application and retrieve data from FirebaseFirestore just fine and display the values in TextEditingController just fine. I retrieve the data this way:

_controllerMemberCellPhone = TextEditingController(text: _memberItem['memberCellPhone']);

value comes in and displays like 7035551234. NOT What I want.

I have applied the "maskFormatter" (see below) which works fine for displaying correcly ONLY when I change/input the Phone Number. Number is changed to (703) 555-1234 which is great for new entries. Data is stored in database correctly (not masked).

var maskFormatter = MaskTextInputFormatter( mask: '+# (###) ###-####', filter: {"#": RegExp(r'[0-9]')}, type: MaskAutoCompletionType.lazy);

How can I get the initial value to be formatted using the Mask? Here is my build widget entry:

//Member Cell Phone TextFormField( keyboardType: TextInputType.phone, inputFormatters: [maskFormatter], readOnly: false, controller: widget._controllerMemberCellPhone, decoration: const InputDecoration( labelText: "Member Cell Phone: ", filled: true, fillColor: Colors.white, hintText: 'Enter the Members Cell Phone:'), validator: (String? value) { return null; }, ),

Sorry relatively new to Flutter and back to developing after long time. Tried numerous things but cannot get anything to work.

Suggestions? This should be simple but looked at LOTS of comments and videos.

0

There are 0 best solutions below