flutterflutter-dependenciesnumberformattermobile-country-code

How to format mobile number based on country code in flutter


Can anyone tell me how to format mobile number based on country code. Hope you understand.

enter image description here

here's what I did try so far:

var controller = new MaskedTextController(mask: '(000) 000 0000');

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar( title: Text("Masked Text"), ),
    body: Container(
       child: Row(
          children: <Widget>[
             Expanded(
               child: TextField(
                  controller: controller,
                  keyboardType: TextInputType.number, maxLength: 18,
               ),
             ),
          ],
       )),
   ); 
 }

Solution

  • The last class (_UsNumberTextInputFormatter) of the code of Text Form fields for the flutter gallery app can help you out greatly.

    The key is to define a inputFormatters for TextFormField.

     
    
        class _NumberFormatterDemo extends State {
          final List _allActivities = ['+1', '+91'];
          String _activity = '+1';
          _NumberTextInputFormatter _phoneNumberFormatter =
              _NumberTextInputFormatter(1);
    
          @override
          Widget build(BuildContext context) {
            return Scaffold(
                appBar: AppBar(
                  title: const Text('Number Formatter Demo'),
                ),
                body: DropdownButtonHideUnderline(
                  child: SafeArea(
                    top: false,
                    bottom: false,
                    child: ListView(
                        padding: const EdgeInsets.all(16.0),
                        children: [
                          const SizedBox(height: 8.0),
                          InputDecorator(
                            decoration: const InputDecoration(
                              labelText: 'Country Code',
                              hintText: 'Select a country code',
                              contentPadding: EdgeInsets.zero,
                            ),
                            isEmpty: _activity == null,
                            child: DropdownButton(
                              value: _activity,
                              onChanged: (String newValue) {
                                setState(() {
                                  _activity = newValue;
                                  switch(newValue){
                                    case '+1':
                                      _phoneNumberFormatter = _NumberTextInputFormatter(1);
                                      break;
                                    case '+91':
                                      _phoneNumberFormatter = _NumberTextInputFormatter(91);
                                      break;
                                  }
                                });
                              },
                              items: _allActivities
                                  .map>((String value) {
                                return DropdownMenuItem(
                                  value: value,
                                  child: Text(value),
                                );
                              }).toList(),
                            ),
                          ),
                          const SizedBox(height: 24.0),
                          TextFormField(
                            decoration: const InputDecoration(
                              border: UnderlineInputBorder(),
                              filled: true,
                              icon: Icon(Icons.phone),
                              hintText: 'Where can we reach you?',
                              labelText: 'Phone Number *',
                            ),
                            keyboardType: TextInputType.phone,
                            onSaved: (String value) {},
                            inputFormatters: [
                              WhitelistingTextInputFormatter.digitsOnly,
                              // Fit the validating format.
                              _phoneNumberFormatter,
                            ],
                          ),
                        ]),
                  ),
                ));
          }
        }
    
        class _NumberTextInputFormatter extends TextInputFormatter {
          int _whichNumber;
          _NumberTextInputFormatter(this._whichNumber);
    
          @override
          TextEditingValue formatEditUpdate(
            TextEditingValue oldValue,
            TextEditingValue newValue,
          ) {
            final int newTextLength = newValue.text.length;
            int selectionIndex = newValue.selection.end;
            int usedSubstringIndex = 0;
            final StringBuffer newText = StringBuffer();
            switch (_whichNumber) {
              case 1:
                {
                  if (newTextLength >= 1 ) {
                    newText.write('(');
                    if (newValue.selection.end >= 1) selectionIndex++;
                  }
                  if (newTextLength >= 4 ) {
                    newText.write(
                        newValue.text.substring(0, usedSubstringIndex = 3) + ') ');
                    if (newValue.selection.end >= 3) selectionIndex += 2;
                  }
                  if (newTextLength >= 7 ) {
                    newText.write(
                        newValue.text.substring(3, usedSubstringIndex = 6) + '-');
                    if (newValue.selection.end >= 6) selectionIndex++;
                  }
                  if (newTextLength >= 11 ) {
                    newText.write(
                        newValue.text.substring(6, usedSubstringIndex = 10) + ' ');
                    if (newValue.selection.end >= 10) selectionIndex++;
                  }
                  break;
                }
              case 91:
                {
                  if (newTextLength >= 5) {
                    newText.write(
                        newValue.text.substring(0, usedSubstringIndex = 5) + ' ');
                    if (newValue.selection.end >= 6) selectionIndex++;
                  }
                  break;
                }
            }
            // Dump the rest.
            if (newTextLength >= usedSubstringIndex)
              newText.write(newValue.text.substring(usedSubstringIndex));
            return TextEditingValue(
              text: newText.toString(),
              selection: TextSelection.collapsed(offset: selectionIndex),
            );
          }
        }
    
     

    Here is my working example -

    Example GIF