international_phone_input

패키지 개요

공개 정보를 바탕으로 생성한 선택 가이드입니다.

libphonenumber 라이브러리를 사용하여 내장된 검증 기능을 제공하는 국제 전화번호 입력을 위한 플러터 패키지입니다. 국가별 표준에 따라 전화번호를 입력하고 형식을 지정할 수 있는 사용자 친화적인 인터페이스를 제공하며, 글로벌 사용자 간 정확한 데이터 수집을 보장합니다. 이 패키지는 입력 또는 선택된 기본값을 기반으로 국가를 자동 감지하고, 적절한 형식을 적용하며 실시간으로 입력된 번호를 검증합니다.

사용 사례

글로벌 사용자 등록
국제 연락 양식
전화번호 검증 워크플로우
다중 지역 모바일 애플리케이션
전자상거래 체크아웃 프로세스

주요 기능

실시간 전화번호 검증
자동 국가 코드 감지
마스킹이 적용된 형식화 입력
주요 국가를 모두 지원합니다
libphonenumber와의 통합

적합한 대상

국제적 대상 사용자를 겨냥한 앱
유효한 전화번호가 필요한 양식
강력한 입력 검증이 필요한 개발자
국제화를 사용하는 프로젝트
준수 요구 사항이 있는 응용 프로그램

고려 사항

완전한 국가 데이터베이스 검색을 위해서는 인터넷 연결이 필요합니다
libphonenumber 종속성으로 인해 앱 크기가 증가할 수 있습니다
UI 컴포넌트의 사용자 지정 제한
오프라인 검증 지원 없음
외부 라이브러리 업데이트에 의존

원본 README

연결된 소스 저장소의 README 원문 스냅샷입니다. 최신 내용은 저장소에서 확인하세요.

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.

패키지, 저장소 및 앱 카테고리 검색