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 分類

安裝套件