extended_phone_number_input

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

一个用于处理电话号码输入的 Flutter 小部件，内置国家代码选择支持、实时验证以及与设备联系人选择器的集成。它通过自动应用格式化和根据所选国家验证输入，简化了国际电话号码的输入。该包旨在提升跨不同地区需要电话号码输入的表单中的用户体验。

适合场景

国际电话号码收集
使用国家特定规则进行表单验证
联系人选择器集成
动态国家代码选择
用户友好的电话输入界面
移动应用注册流程

主要特点

国家代码自动检测
实时输入验证
联系人选择器集成
可自定义样式
支持多种语言环境
自动格式化

适合对象

全局应用
用户注册表单
客户服务应用
需要国际电话输入的应用程序
需要强大电话输入处理功能的开发者

使用建议

需要互联网以获取完整的国家数据
可能需要额外的权限才能访问联系人
国家列表的自定义选项有限
依赖外部依赖项进行格式化逻辑
未针对非常大的数据集进行优化
初始设置可能需要配置

原始 README

以下为关联源码仓库的 README 原文快照，最新内容请访问源码仓库。

A Highly customizable Phone input Flutter widget that supports country code, validation and contact picker.

Features

Phone number with international validation
Include only specific countries
Exclude specific countries
Set a phone number using a controller (Selected country will be updated automatically)
Pick a phone number from contacts list

Getting started

Install the package extended_phone_number_input:

flutter pub add extended_phone_number_input

If you target Android 11+ (API 30+) and want to use the build-in contact picker you need to add the android.permission.READ_CONTACTS permission on the AndroidManifest.xml as this permission will be requested automatically.

Usage

A full and rich example can be found in /example folder.

Simple usage

 PhoneNumberInput(initialCountry: 'SA', locale: 'ar')

Show countries as dialog (default is bottom sheet)

 const PhoneNumberInput(
    initialCountry: 'US',
    locale: 'en',
    countryListMode: CountryListMode.dialog,
    contactsPickerPosition: ContactsPickerPosition.suffix,
    )

Custom borders

 PhoneNumberInput(
    initialCountry: 'TN',
    locale: 'fr',
    countryListMode: CountryListMode.dialog,
    contactsPickerPosition: ContactsPickerPosition.suffix,
    enabledBorder: OutlineInputBorder(
    borderRadius: BorderRadius.circular(10),
    borderSide: const BorderSide(color: Colors.purple)),
    focusedBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(10),
        borderSide: const BorderSide(color: Colors.purple))
    )

Select Phone number programmatically

To be able to select a phone number programmatically, we first need to define a PhoneInputController :

PhoneInputController _controller = PhoneInputController(context);

 PhoneNumberInput(
     controller: _controller
    ...

Select the desired phone number:

_controller.phoneNumber = '+1-....'

Note:

If you want to set the phone number from contact, The widget already support this feature without the need to use the controller.

搜索插件、代码仓与 APP 分类

安装插件