Un package Flutter simple pour saisir le numéro de téléphone au format international

Un package flutter simple et personnalisable pour la saisie du numéro de téléphone au format intl / international utilise le libphonenumber de Google

Décoration personnalisée	Bordure personnalisée	Défaut

la toile

Quoi de neuf

Migration de sécurité nulle
Dépendances améliorées
Changement de rupture Amorti SelectorConfig.backgroundColor et remplacé par Theme.of(context).canvasColor
Correction du dial_code de la République dominicaine sur country_list.dart #196
Correction du changement de pays lorsque initialValue est défini avec le widget #170
PhoneNumberUtil.getNumberType fixe sur mobile et web #188
Ajout de traductions pour le turc et le roumain #190
Mise à jour du nom de pays de Taïwan #181
Ajout de la configuration de style pour le bouton de sélection #177
Suppression de tous les doublons potentiels sur la liste des pays #175
Correction de l’espacement du sélecteur d’ignorer et du champ de texte en mode prefixIcon # 161
😅 Eh bien, en fait, en utilisant le curseur Couleur # 160
InitialValue fixe ne doit pas être formaté si formatInput est faux #192
Correction du bogue #187 de débordement RenderFlex de la feuille inférieure, similaire au bogue #197 de la recherche par nom de pays ou du code de numérotation
Le fichier README.md mis à jour pour corriger la version Web ne reconnaît pas les packages #186
Le rappel fixe onSaved dans l’InternationalPhoneNumberInput n’est pas synchrone #180
Cherry a sélectionné les correctifs en attente et la demande d’extraction du référentiel.

Fonctionnalités

Assistance Web.
Prise en charge des langues RTL
Liste déroulante du mode de sélection, feuille inférieure et boîte de dialogue
Formateur au fur et à mesure de la frappe : formate les entrées au format international sélectionné
Obtenir des informations sur la région avec PhoneNumber.getRegionInfoFromPhoneNumber(String phoneNumber, [String isoCode]);
Format PhoneNumber avec PhoneNumber.getParsableNumber(String phoneNumber, String isoCode) ou PhoneNumber Reference.parseNumber()
Liste personnalisée de pays, par exemple [‘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

Assistance Web

Dans votre répertoire d’applications, modifiez web/index.html pour ajouter ce qui suit

<!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>

Ou payer /example dossier de GithubGenericName.

Noter

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

Pourrait lancer une exception si le numéro de téléphone n’est pas reconnu, c’est un bon modèle pour passer l’isoCode du pays ou avoir ‘+’ au début de la chaîne

isoCode peut être nul si PhoneNumber n’est pas reconnu

Constructeurs

s/n	Constructeur
1	InternationalPhoneNumberInput

Paramètres disponibles

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

Paramètre	Type de données	Valeur initiale
onInputChanged	fonction (numéro de téléphone)	nul
surEnregistré	fonction (numéro de téléphone)	nul
onInputValidated	fonction (bool)	nul
focusNode	FocusNode	nul
textFieldController	Contrôleur d’édition de texte	TextEditingController()
onSubmit	Fonction()	nul
clavierAction	TextInputAction	nul
clavierType	TextInputType	TextInputType.phone
des pays	Liste	nul
style de texte	Style de texte	nul
selectorTextStyle	Style de texte	nul
inputBorder	InputBorder	nul
entréeDécoration	EntréeDécoration	nul
valeur initiale	Numéro de téléphone	nul
texte d’indication	Chaîne de caractères	Numéro de téléphone
selectorButtonOnErrorPadding	double	24
spaceBetweenSelectorAndTextField	double	12
longueur maximale	entier	15
est autorisé	booléen	vrai
mise au point automatique	booléen	faux
autoValidateModeautoValidateMode	AutoValidateMode	AutoValidateMode.disabled
formatEntrée	booléen	vrai
Message d’erreur	Chaîne de caractères	Numéro de téléphone invalide
selectorConfig	SelectorConfig	SelectorConfig()
ignoreBlank	booléen	faux
lieu	Chaîne de caractères	nul
searchBoxDécoration	EntréeDécoration	nul
texteAligner	Alignement du texte	TextAlign.start
texteAlignerVertical	TexteAlignerVertical	TextAlignVertical.center
scrollRemplissage	Insertions de bord	EdgeInsets.all(20.0)
countrySelectorScrollControlled	booléen	vrai
curseurCouleur	Chaîne de caractères \	nul
autofillHints	Itérable	nul

Types de sélecteur

MENU DÉROULANT	FEUILLE INFÉRIEURE	DIALOGUE

Essai

Les paramètres Widget Key et les classes Helper sont désormais disponibles pour les tests d’intégration, consultez cet exemple 🎯 Exemple de test d’intégration

Si vous rencontrez un problème ou qu’il manque une fonctionnalité à la bibliothèque, n’hésitez pas à ouvrir un ticket. N’hésitez pas à bifurquer, à améliorer le package et à faire une pull request.