Flutter iOS端InternationalPhoneNumber组件手机号重复区号问题解决

iOS端使用intl_phone_number_input组件时，会出现系统自动追加区号导致显示重复（如+91 +91 1234512345）的问题，Android端无此异常，可通过以下几种方式解决：

1. 关闭iOS自动输入相关特性 #

iOS的智能输入、自动填充可能会触发重复区号，在组件配置中关闭这些特性：

InternationalPhoneNumberInput(
  onInputChanged: (PhoneNumber number) {
    // 自定义处理逻辑
  },
  inputDecoration: const InputDecoration(
    border: OutlineInputBorder(),
    autocorrect: false,
    enableSuggestions: false,
  ),
  formatInput: false, // 关闭组件自动格式化，避免与系统输入冲突
  keyboardType: TextInputType.numberWithOptions(signed: false, decimal: false),
  selectorConfig: const SelectorConfig(
    selectorType: PhoneInputSelectorType.BOTTOM_SHEET,
  ),
  textFieldController: _phoneController,
)

核心是设置autocorrect: false、enableSuggestions: false以及formatInput: false，避免系统和组件双重处理输入内容。

2. 手动过滤重复区号 #

在输入回调中手动检查并移除重复的区号前缀：

// 提前初始化文本控制器
final TextEditingController _phoneController = TextEditingController();

// 组件配置
InternationalPhoneNumberInput(
  onInputChanged: (PhoneNumber number) {
    final String rawNumber = number.phoneNumber ?? '';
    final String selectedDialCode = number.dialCode ?? '';
    // 检测是否存在重复区号前缀
    if (rawNumber.startsWith('$selectedDialCode $selectedDialCode')) {
      // 去除重复的区号部分
      final String correctedNumber = rawNumber.replaceFirst('$selectedDialCode ', '');
      // 更新控制器内容，保持光标在末尾
      _phoneController.text = correctedNumber.replaceFirst(selectedDialCode, '');
      _phoneController.selection = TextSelection.fromPosition(
        TextPosition(offset: correctedNumber.length),
      );
    }
  },
  textFieldController: _phoneController,
  // 其他配置项...
)

3. 升级组件到最新版本 #

旧版本的intl_phone_number_input可能存在iOS端的兼容bug，升级到最新稳定版可以解决部分底层问题：
在pubspec.yaml中更新依赖：

dependencies:
  intl_phone_number_input: ^0.7.3 # 替换为当前最新稳定版本

执行flutter pub get完成依赖更新。

内容的提问来源于stack exchange，提问作者jitendra1ness