如何将IntlPhoneField组件的下拉箭头设置在右侧+92国家码旁

方法1：使用组件内置参数（推荐） #

最新版本的intl_phone_field已经原生支持配置下拉箭头的位置，仅需新增一个参数即可实现需求，修改后的代码如下：

Container(
  width: MediaQuery.of(context).size.width * 0.80,
  height: 50.0,
  child: IntlPhoneField(
    showDropdownIcon: true,
    // 新增该配置项，将下拉箭头移动到国家码右侧
    dropdownIconPosition: DropdownIconPosition.right,
    // 可选配置：自定义下拉箭头的样式
    dropdownIcon: const Icon(
      Icons.arrow_drop_down,
      size: 20,
    ),
    decoration: InputDecoration(
      labelText: 'Phone Number',
      border: OutlineInputBorder(
        borderRadius: BorderRadius.all(Radius.circular(10.0))
      ),
    ),
    initialCountryCode: 'PK',
    onChanged: (phone) {
      print(phone.completeNumber);
    },
  )
),

如果当前项目依赖的intl_phone_field版本低于3.2.0，需要先更新依赖版本，在pubspec.yaml中修改版本号后执行flutter pub get即可：

dependencies:
  intl_phone_field: ^3.2.0

方法2：旧版本兼容实现（无需升级依赖） #

如果不方便升级包版本，可以通过隐藏原生下拉图标、自定义触发控件的方式实现效果：

// 全局声明Key用来手动触发国家选择弹窗
GlobalKey<IntlPhoneFieldState> phoneFieldKey = GlobalKey();

Container(
  width: MediaQuery.of(context).size.width * 0.80,
  height: 50.0,
  child: IntlPhoneField(
    key: phoneFieldKey,
    // 隐藏原生左侧的下拉图标
    showDropdownIcon: false,
    decoration: InputDecoration(
      labelText: 'Phone Number',
      border: OutlineInputBorder(
        borderRadius: BorderRadius.all(Radius.circular(10.0))
      ),
      // 自定义国家码右侧的下拉箭头
      prefix: InkWell(
        onTap: () {
          // 手动触发国家选择弹窗
          phoneFieldKey.currentState?.showCountryPickerDialog();
        },
        child: const Padding(
          padding: EdgeInsets.symmetric(horizontal: 4.0),
          child: Icon(Icons.arrow_drop_down, size: 20,),
        ),
      ),
    ),
    initialCountryCode: 'PK',
    onChanged: (phone) {
      print(phone.completeNumber);
    },
  )
),

可通过调整自定义prefix的padding值适配箭头和国家码的间距。

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