How to format mobile number based on country code in flutter

Question

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

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,
               ),
             ),
          ],
       )),
   ); 
 }

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: [ Expanded( child: TextField( controller: controller, keyboardType: TextInputType.number, maxLength: 18, ), ), ], )), ); } — Rutvik Gumasana, Aug 30 '19 at 11:37
*I've done this one just try to format number. i don't how to do based on country code. Hope you Understand:) Please Help me.* — Rutvik Gumasana, Aug 30 '19 at 11:37
Okay @MazinIbrahim thank you so much :) Your Help will very appreciated. — Rutvik Gumasana, Aug 30 '19 at 12:00
yes, this will also work form me. SO what i want exactly there is two textbox first text box is for country code and second for phone number based on the format — Rutvik Gumasana, Aug 30 '19 at 12:35
You can get this result using https://pub.dev/packages/country_code_picker beside your `TextField` , and let the `controller` style the text according to the country selection, will you have to implement it by yourself. — Mazin Ibrahim, Aug 30 '19 at 13:36
I think buddy may it's not work. Can you just create simple snippet of what you say about this. so i can get idea and i am able to implement :) your help is very useful for me:) — Rutvik Gumasana, Aug 30 '19 at 14:15

score 8 · Accepted Answer · answered Aug 31 '19 at 13:16

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 -

Thank you so much for your help. it has some little bit error and i fixed them up. :) — Rutvik Gumasana, Sep 02 '19 at 04:57

score 1 · Answer 2 · answered Aug 09 '20 at 10:05

You can use following phone number formatter:

This formatter converts 00000000 to (000) 000 0000

class PhoneNumberFormatter extends TextInputFormatter {
  PhoneNumberFormatter();

  @override
  TextEditingValue formatEditUpdate(
    TextEditingValue oldValue,
    TextEditingValue newValue,
  ) {
    
    if (!oldValue.text.contains("(") &&
        oldValue.text.length >= 10 &&
        newValue.text.length != oldValue.text.length) {
      return TextEditingValue(
        text: "",
        selection: TextSelection.collapsed(offset: 0),
      );
    }

    if(oldValue.text.length>newValue.text.length){
      return TextEditingValue(
        text: newValue.text.toString(),
        selection: TextSelection.collapsed(offset: newValue.text.length),
      );
    }

    var newText = newValue.text;
    if (newText.length == 1) newText ="(" + newText;
    if (newText.length == 4) newText = newText + ") ";
    if (newText.length == 9) newText = newText + " ";

    return TextEditingValue(
      text: newText.toString(),
      selection: TextSelection.collapsed(offset: newText.length),
    );
  }
}

For more information: https://www.codesenior.com/en/tutorial/Flutter-Phone-Number-Formatter

score 0 · Answer 3 · answered Dec 14 '20 at 09:54

A good and easy solution is https://pub.dev/packages/intl_phone_number_input

  final TextEditingController controller = TextEditingController();
  String initialCountry = 'NG';
  PhoneNumber number = PhoneNumber(isoCode: 'NG');

  InternationalPhoneNumberInput(
              onInputChanged: (PhoneNumber number) {
                print(number.phoneNumber);
              },
              onInputValidated: (bool value) {
                print(value);
              },
              selectorConfig: SelectorConfig(
                selectorType: PhoneInputSelectorType.BOTTOM_SHEET,
                backgroundColor: Colors.black,
              ),
              ignoreBlank: false,
              autoValidateMode: AutovalidateMode.disabled,
              selectorTextStyle: TextStyle(color: Colors.black),
              initialValue: number,
              textFieldController: controller,
              inputBorder: OutlineInputBorder(),
            ),

score 0 · Answer 4 · answered Sep 23 '22 at 09:08

0

In case if somebody need to display a us/canada phone formatted inside a text widget. try this;

String formattedPhoneNumber = "(" + phoneNumber.substring(0,3) + ") " + 
phoneNumber.substring(3,6) + "-" +phoneNumber.substring(6,phoneNumber.length);

answered Sep 23 '22 at 09:08

Zia

506
3
20

How to format mobile number based on country code in flutter

4 Answers4