国际电话号码输入

一个简单且可定制的 Flutter 包，用于以 intl / 国际格式输入电话号码，使用 Google 的 libphonenumber

CustomDecoration CustomBorder 默认值
Screenshot_1587652933 Screenshot_1587652933 Screenshot_1587652933
Web

有什么新鲜事

  • 空安全迁移
  • 升级了依赖项
  • 重大变更 弃用 SelectorConfig.backgroundColor 并替换为 Theme.of(context).canvasColor
  • 修复了 country_list.dart 中的多米尼加共和国拨号代码 #196
  • 修复了在设置 initialValue 时更改国家/地区 #170
  • 修复了 mobile 和 web 上的 PhoneNumberUtil.getNumberType #188
  • 为土耳其语和罗马尼亚语添加了翻译 #190
  • 更新了台湾国家名称 #181
  • 为选择器按钮添加了样式配置 #177
  • 移除了国家/地区列表中的任何潜在重复项 #175
  • 修复了在 prefixIcon 模式下忽略选择器和文本字段间距的问题 #161
  • 嗯，实际上是使用了 cursorColor #160
  • 修复了如果 formatInput 为 false，initialValue 不应被格式化 #192
  • 修复了 Bottom Sheet RenderFlex 溢出错误 #187，类似于按国家/地区名称或拨号代码搜索错误 #197
  • 更新了 README.md 文件以修复 Web 发布无法识别包的问题 #186
  • 修复了 InternationalPhoneNumberInput 中的 onSaved 回调不是同步的问题 #180
  • 从存储库中精选了待处理的修复和拉取请求。

功能

  • Web 支持。
  • 支持 RTL 语言
  • 选择器模式下拉、底部工作表和对话框
  • 键入时格式化：将输入格式化为选定的国际格式
  • 使用 PhoneNumber.getRegionInfoFromPhoneNumber(String phoneNumber, [String isoCode]); 获取地区信息；
  • 使用 PhoneNumber.getParsableNumber(String phoneNumber, String isoCode) 或 PhoneNumber Reference.parseNumber() 格式化电话号码
  • 自定义国家/地区列表，例如 ['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

Web 支持

在您的应用程序目录中，编辑 web/index.html 以添加以下内容

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

或从 Github 签出 /example 文件夹。

笔记

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

如果电话号码未被识别，可能会抛出异常，因此将国家/地区的 isoCode 传递或在字符串开头添加“+”是一个好模式

如果未识别电话号码，isoCode 可能为 null

用法

构造函数

s/n 构造函数
1 InternationalPhoneNumberInput

可用参数

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,
});
参数 数据类型 初始值
onInputChanged function(PhoneNumber) 空
onSaved function(PhoneNumber) 空
onInputValidated function(bool) 空
focusNode FocusNode 空
textFieldController TextEditingController TextEditingController()
onSubmit Function() 空
keyboardAction TextInputAction 空
keyboardType TextInputType TextInputType.phone
countries 列表 空
文本样式 TextStyle 空
selectorTextStyle TextStyle 空
inputBorder InputBorder 空
inputDecoration InputDecoration 空
initialValue PhoneNumber 空
hintText 字符串 手机号码
selectorButtonOnErrorPadding 双精度 24
spaceBetweenSelectorAndTextField 双精度 12
maxLength integer 15
isEnabled boolean 真
autoFocus boolean 假
autoValidateMode AutoValidateMode AutoValidateMode.disabled
formatInput boolean 真
errorMessage 字符串 无效的电话号码
selectorConfig SelectorConfig SelectorConfig()
ignoreBlank boolean 假
locale 字符串 空
searchBoxDecoration InputDecoration 空
textAlign TextAlign TextAlign.start
textAlignVertical TextAlignVertical TextAlignVertical.center
scrollPadding EdgeInsets EdgeInsets.all(20.0)
countrySelectorScrollControlled boolean 真
cursorColor String \ 空
autofillHints Iterable 空

选择器类型

DROPDOWN BOTTOMSHEET DIALOG
Screenshot_1587652933 Screenshot_1587652933 Screenshot_1587652933

测试

Widget Key 参数和助手类现已可用于集成测试，请查看此示例？ 集成测试示例

贡献

如果您遇到任何问题或库缺少功能，请随时打开一个 issue。随时 fork、改进包并提交 pull request。

联合贡献者

有兴趣成为联合贡献者？请查看此链接了解更多信息 discussions/201

贡献者



使用 contributors-img 制作。

依赖项

鸣谢

特别感谢 niinyarko

常见问题

  • 有关讨论和常见问题和疑虑，请在此处查看 此处

GitHub

查看 Github