international_phone_input

Paketübersicht

Aus öffentlichen Paketdaten erstellte Orientierung.

Ein Flutter-Paket zur Verarbeitung internationaler Telefonnummern-Eingaben mit integrierter Validierung mithilfe der libphonenumber-Bibliothek. Es bietet eine benutzerfreundliche Oberfläche zum Eingeben und Formatieren von Telefonnummern gemäß landesspezifischen Standards, um eine genaue Datenerfassung bei globalen Nutzern sicherzustellen. Das Paket erkennt den Landcode automatisch basierend auf der Eingabe oder einem ausgewählten Standard, wendet die richtige Formatierung an und validiert die eingegebene Nummer in Echtzeit.

Anwendungsfälle

Globale Benutzerregistrierung
Internationale Kontaktformulare
Workflows zur Überprüfung von Telefonnummern
Mehrfachregionale mobile Anwendungen
E-Commerce-Kassenprozesse

Hauptmerkmale

Echtzeit-Validierung von Telefonnummern
Automatische Länderkennung
Formatierte Eingabe mit Maskierung
Unterstützt alle wichtigen Länder
Integration mit libphonenumber

Geeignet für

Apps für internationale Zielgruppen
Formulare, die gültige Telefonnummern erfordern
Entwickler, die eine robuste Eingabeverifizierung benötigen
Projekte, die Internationale Nutzung verwenden
Anwendungen mit Compliance-Anforderungen

Hinweise

Benötigt Internet für vollständige Länderdatenbankabfrage
Kann die App-Größe aufgrund der libphonenumber-Abhängigkeit erhöhen
Begrenzte Anpassung von Benutzeroberflächenkomponenten
Kein Offline-Validierungsunterstützung
Abhängig von Updates externer Bibliotheken

Original-README

Originaler README-Schnappschuss aus dem verknüpften Quell-Repository. Aktuelle Inhalte finden Sie im Repository.

International Phone Number Input For Flutter

Usage

Just put the component in your application.

import 'package:international_phone_input/international_phone_input.dart';

String phoneNumber;
String phoneIsoCode;

void onPhoneNumberChange(String number, String internationalizedPhoneNumber, String isoCode) {
    setState(() {
       phoneNumber = number;
       phoneIsoCode = isoCode;
    });
}

// Default Widget with dropdown list
@override
 Widget build(BuildContext context) => Scaffold(
     body: Center(
       child: InternationalPhoneInput(
          onPhoneNumberChange: onPhoneNumberChange, 
          initialPhoneNumber: phoneNumber,
          initialSelection: phoneIsoCode,
          enabledCountries: ['+233', '+1']
       ),
     ),
 );

// Widget with text input only

 onValidPhoneNumber(
      String number, String internationalizedPhoneNumber, String isoCode) {
    setState(() {
      confirmedNumber = internationalizedPhoneNumber;
    });
  }

@override
 Widget build(BuildContext context) => Scaffold(
     body: Center(
       child:  InternationalPhoneInputText(
         onValidPhoneNumber: onValidPhoneNumber,
        ),
     ),
 );

// Widget with decoration
// Using decoration overwrites other styles such as hintStyle, hintText, etc.

@override
 Widget build(BuildContext context) => Scaffold(
     body: Center(
       child: InternationalPhoneInput(
          decoration: InputDecoration.collapsed(hintText: '(416) 123-4567'),
          onPhoneNumberChange: onPhoneNumberChange, 
          initialPhoneNumber: phoneNumber,
          initialSelection: phoneIsoCode,
          enabledCountries: ['+233', '+1'],
          showCountryCodes: false
       ),
     ),
 );

Customization

Here is a list of properties available to customize the widget:

Name	Type	Description
initialPhoneNumber	String	used to set initial phone number
initialSelection	String	used to set initial country code
errorText	String	use this to set an error message
hintText	String	sets hint
labelText	String	sets label
errorStyle	TextStyle	style applied to error message
hintStyle	TextStyle	style applied to hint
labelStyle	TextStyle	style applied to label
errorMaxLines	int	the maximum number of lines user can type
enabledCountries	List	the list of enabled countries to display
decoration	InputDecoration	decoration applied to the TextField widget
showCountryCodes	bool	shows the country code (default true)
showCountryFlags	bool	shows. the country flags (default true)
dropdownIcon	Widget	use this to customize dropdown icon

Contributions

Contributions of any kind are more than welcome! Feel free to fork and improve international_phone_input in any way you want, make a pull request, or open an issue.

Pakete, Repositories und App-Kategorien suchen