PhoneIntl - A simple and customizable flutter package for inputting phone number in intl / international format uses Google's libphonenumber

Related tags

Templates phoneIntl
Overview

Intl Phone Number Input

A simple and customizable flutter package for inputting phone number in intl / international format uses Google's libphonenumber

CustomDecoration CustomBorder Default
Screenshot_1587652933 Screenshot_1587652933 Screenshot_1587652933
Web

What's new

  • Null Safety Migration
  • Upgraded dependencies
  • Breaking Change Depreciated SelectorConfig.backgroundColor and replaced with Theme.of(context).canvasColor
  • Fixed Dominican Republic dial_code at country_list.dart #196
  • Fixed change country when initialValue is set with the widget #170
  • Fixed PhoneNumberUtil.getNumberType on mobile and web #188
  • Added translations for Turkish and Romanian #190
  • Updated Taiwan country name #181
  • Added style config for selector button #177
  • Removed any potential duplicates on countries list #175
  • Fixed ignore selector and text field spacing in prefixIcon mode #161
  • 😅 Well, Actually using cursorColor #160
  • Fixed initialValue should not be formatted if formatInput is false #192
  • Fixed Bottom Sheet RenderFlex overflow bug #187, similar to Search by Country name or dial code bug #197
  • Updated README.md file to fix Web release does not recognize the packages #186
  • Fixed onSaved callback in the InternationalPhoneNumberInput is not synchronous #180
  • Cherry picked pending fixes and pull request from repo.

Features

  • Web support.
  • Support for RTL languages
  • Selector mode dropdown, bottom sheet and dialog
  • As You Type Formatter: formats inputs to its selected international format
  • Get Region Info with PhoneNumber.getRegionInfoFromPhoneNumber(String phoneNumber, [String isoCode]);
  • Format PhoneNumber with PhoneNumber.getParsableNumber(String phoneNumber, String isoCode) or PhoneNumber Reference.parseNumber()
  • Custom list of countries e.g. ['NG', 'GH', 'BJ' 'TG', 'CI']
    String phoneNumber =  '+234 500 500 5005';
    PhoneNumber number = await PhoneNumber.getRegionInfoFromPhoneNumber(phoneNumber);
    String parsableNumber = number.parseNumber();
    `controller reference`.text = parsableNumber

Web Support

In your app directory, edit web/index.html to add the following

<!DOCTYPE html>
<html>
    <head>
        ...
    </head>
    <body>
    
        ...

        <script src="assets/packages/libphonenumber_plugin/js/libphonenumber.js"></script>
        <script src="assets/packages/libphonenumber_plugin/js/stringbuffer.js"></script>

        ...

        <script src="main.dart.js" type="application/javascript"></script>
    </body>
</html>

Or checkout /example folder from Github.

Note

    PhoneNumber.getRegionInfoFromPhoneNumber(String phoneNumber, [String isoCode])

Could throw an Exception if the phoneNumber isn't recognised its a good pattern to pass the country's isoCode or have '+' at the beginning of the string

isoCode could be null if PhoneNumber is not recognised

Usage

Constructors

s/n Constructor
1 InternationalPhoneNumberInput

Available Parameters

InternationalPhoneNumberInput({
    Key key,
      this.selectorConfig = const SelectorConfig(),
      @required this.onInputChanged,
      this.onInputValidated,
      this.onSubmit,
      this.onFieldSubmitted,
      this.validator,
      this.onSaved,
      this.textFieldController,
      this.keyboardAction,
      this.keyboardType = TextInputType.phone,
      this.initialValue,
      this.hintText = 'Phone number',
      this.errorMessage = 'Invalid phone number',
      this.selectorButtonOnErrorPadding = 24,
      this.spaceBetweenSelectorAndTextField = 12,
      this.maxLength = 15,
      this.isEnabled = true,
      this.formatInput = true,
      this.autoFocus = false,
      this.autoFocusSearch = false,
      this.autoValidateMode = AutovalidateMode.disabled,
      this.ignoreBlank = false,
      this.countrySelectorScrollControlled = true,
      this.locale,
      this.textStyle,
      this.selectorTextStyle,
      this.inputBorder,
      this.inputDecoration,
      this.searchBoxDecoration,
      this.textAlign = TextAlign.start,
      this.textAlignVertical = TextAlignVertical.center,
      this.scrollPadding = const EdgeInsets.all(20.0),
      this.focusNode,
      this.cursorColor,
      this.autofillHints,
      this.countries
    });
```|

```dart
SelectorConfig({
    this.selectorType = PhoneInputSelectorType.DROPDOWN,
    this.showFlags = true,
    this.useEmoji = false,
    this.backgroundColor,
    this.countryComparator,
    this.setSelectorButtonAsPrefixIcon = false,
});
Parameter Datatype Initial Value
onInputChanged function(PhoneNumber) null
onSaved function(PhoneNumber) null
onInputValidated function(bool) null
focusNode FocusNode null
textFieldController TextEditingController TextEditingController()
onSubmit Function() null
keyboardAction TextInputAction null
keyboardType TextInputType TextInputType.phone
countries List null
textStyle TextStyle null
selectorTextStyle TextStyle null
inputBorder InputBorder null
inputDecoration InputDecoration null
initialValue PhoneNumber null
hintText String Phone Number
selectorButtonOnErrorPadding double 24
spaceBetweenSelectorAndTextField double 12
maxLength integer 15
isEnabled boolean true
autoFocus boolean false
autoValidateMode AutoValidateMode AutoValidateMode.disabled
formatInput boolean true
errorMessage String Invalid phone number
selectorConfig SelectorConfig SelectorConfig()
ignoreBlank boolean false
locale String null
searchBoxDecoration InputDecoration null
textAlign TextAlign TextAlign.start
textAlignVertical TextAlignVertical TextAlignVertical.center
scrollPadding EdgeInsets EdgeInsets.all(20.0)
countrySelectorScrollControlled boolean true
cursorColor String \ null
autofillHints Iterable null

Selector Types

DROPDOWN BOTTOMSHEET DIALOG
Screenshot_1587652933 Screenshot_1587652933 Screenshot_1587652933

Testing

Widget Key parameters and Helper classes are now available for integration testing check out this example 🎯 Integration Testing Example

Contributions

If you encounter any problem or the library is missing a feature feel free to open an issue. Feel free to fork, improve the package and make pull request.

Co-contributors

Interested in becoming a co-contributors checkout this link for more info discussions/201

Contributors

Made with contributors-img.

Dependencies

Credits

A special thanks to niinyarko

FAQ

  • For discussions and frequent question and concerns, check here
You might also like...

A simple sprite format for building 1bit styled graphics.

A simple sprite format for building 1bit styled graphics.

Mini Sprite Mini sprite is a simple, matrix based format for creating 1bit styled graphics. Project structure Mini Sprite is composed of several proje

Dec 15, 2022

A JSON serialize class to convert 'to' and 'from' JSON format Enums, DateTime and any of your own classes.

A JSON serialize class to convert 'to' and 'from' JSON format Enums, DateTime and any of your own classes. Introduction Jsonize solves the problem of

Nov 17, 2022

The Flutter app demonstrates displaying data in a weekly format.

The Flutter app demonstrates displaying data in a weekly format.

Flutter weekly chart The Flutter app demonstrates displaying data in a weekly format. I came across this kind of screen in the app that I have been wo

Jan 2, 2023

Flutter Currency Format Converter Library

Save your time on a little logic converting a currency from integer to string or string to integer. if you intrested to contribute to our little proje

Dec 7, 2021

MoneyTextFormField is one of the flutter widget packages that can be used to input values in the form of currencies, by displaying the output format in realtime.

MoneyTextFormField is one of the flutter widget packages that can be used to input values in the form of currencies, by displaying the output format in realtime.

MoneyTextFormField MoneyTextFormField is one of the flutter widget packages that can be used to input values in the form of currencies, by displaying

Jan 1, 2023

A Flutter App To Download Videos From YouTube In Mp3 Format

A Flutter App To Download Videos From YouTube In Mp3 Format

Flutter_YouTube_MP3 App A Simple app To Download mp3 Videos From YouTube ❤️ Found this project useful? If you found this project useful, then please c

Dec 19, 2022

Rich text editor for Flutter based on Delta format (Quill fork)

Visual Editor Visual Editor is a Rich Text editor for Flutter originally forked from Flutter Quill. The editor is built around the powerful Delta docu

Jan 7, 2023

An application used to manage all your tabs in a clean, scrollable, categorized format.

An application used to manage all your tabs in a clean, scrollable, categorized format.

Tabmanager Created by Sami-ul You can contact me here: [email protected] Recent updates Made the app run faster by using the backend to serve t

Nov 2, 2022

Simple tool to open WhatsApp chat without saving the number, developed using Google's Flutter Framework. for Android/ IOS/ Desktop/ Web

Simple tool to open WhatsApp chat without saving the number, developed using Google's Flutter Framework. for Android/ IOS/ Desktop/ Web

OpenWp Simple tool to open WhatsApp chat without saving the number Explore the docs » View Demo · Report Bug · Request Feature Table of Contents About

Nov 1, 2022
Owner
null
Leverages libphonenumber to allow for asynchronous and synchronous formatting of phone numbers in Flutter apps

Leverages libphonenumber to allow for asynchronous and synchronous formatting of phone numbers in Flutter apps. Includes a TextInputFormatter to allow real-time AsYouType formatting.

Bottlepay 43 Nov 2, 2022
Eder Zambrano 0 Feb 13, 2022
Flutter package for listening SMS code on Android, suggesting phone number, email, saving a credential.

Flutter Smart Auth From Tornike & Great Contributors Flutter package for listening SMS code on Android, suggesting phone number, email, saving a crede

Tornike 16 Jan 1, 2023
it's just phone number authentication and connected to firebase

simplevar A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if thi

vivek kumar 0 Dec 27, 2021
An android app that can automatically dial a phone number.

AutoCallScheduler An android app that can automatically dial a phone number within a given scheduled of time. Basically it's a test base app of google

Rezwan 24 Dec 4, 2022
Presentation-Remote-PC - Manage your presentation from your smart phone - Phone Client

Presentation-Remote-PC Manage your presentation from your smart phone - Phone Cl

Hasan Ragab Eltantawy 1 Jan 25, 2022
A Dart package that provides a customizable country phone code picker for your Flutter application

A Flutter package that provides an easy and customizable country phone code picker widget! Features This package comes with a lot of customization all

Samit Kapoor 1 Oct 1, 2022
Flutter app using MVVM architecture pattern , dio , provider , intl packages.

News App Simple news application using free news API for fetching realtime data from the internet. Features -Used MVVM architecture pattern. Packages

null 3 Mar 25, 2022
A Dart widget for entering international telephone numbers with dropdown searching input countries

Dart Tel Input A Dart widget for entering international telephone numbers with dropdown searching input countries Getting Started Add the following li

աɨռɢӄաօռɢ 8 Oct 29, 2020
A simple dart package to convert large numbers to a human readable format. 1278 to 1.2K instead, for example.

A simple dart package to convert large numbers to a human readable format. 1278 to 1.2K instead, for example. Features Represents large numbers in ter

Rohit V 1 Oct 8, 2022