Flutter intl_phone_number_input实现带国家码手机号输入框样式不符求助

使用intl_phone_number_input包开发手机号输入字段时，实际渲染效果无法匹配设计稿样式。

• 设计稿预期效果：
  
• 当前实际运行效果：
  

InternationalPhoneNumberInput(
              hintText: 'Telefon Numarası',
              onInputChanged: (PhoneNumber number) {
                print(number.phoneNumber);
              },
              onInputValidated: (bool value) {
                print(value);
              },
              ignoreBlank: false,
              autoValidateMode: AutovalidateMode.disabled,
              selectorTextStyle: TextStyle(
                color: Colors.black,
                backgroundColor: Colors.grey,
              ),
              selectorConfig: const SelectorConfig(
                  selectorType: PhoneInputSelectorType.DROPDOWN,
                  setSelectorButtonAsPrefixIcon: true,
                  leadingPadding: 0,
                  showFlags: false,
                  trailingSpace: false),
              initialValue: PhoneNumber(isoCode: 'TR'),
              textFieldController: TextEditingController(),
              formatInput: false,
              keyboardType: TextInputType.numberWithOptions(
                  signed: true, decimal: true),
              inputBorder: UnderlineInputBorder(),
              inputDecoration: InputDecoration(
                floatingLabelAlignment: FloatingLabelAlignment.start,
                labelText: 'Telefon Numarası',
              ),
              textStyle: AppTextStyle().getSfProDisplayMedium(Colors.black),
              onSaved: (PhoneNumber number) {
                print('On Saved: $number');
              },
            ),

样式不匹配由几处配置错误导致，按以下调整即可对齐设计稿：

• 移除selectorTextStyle中的backgroundColor: Colors.grey属性，该属性会给国家区号文本增加多余灰底，不符合设计稿的透明背景要求
• 调整SelectorConfig参数：将leadingPadding设为12（可根据实际像素偏差微调），trailingSpace设为true，在国家区号和手机号输入内容之间留出符合设计稿的间距
• 移除顶层冗余的inputBorder、hintText配置，所有边框、提示样式统一在inputDecoration中配置，分别定义启用、聚焦状态下的下划线颜色、粗细
• 在inputDecoration中手动指定下拉箭头作为suffixIcon，替换控件默认的下拉箭头样式，同时配置contentPadding对齐文本的垂直位置，调整label的普通状态、浮动状态样式匹配设计稿字重、颜色

修复后参考代码：

InternationalPhoneNumberInput(
  onInputChanged: (PhoneNumber number) {
    print(number.phoneNumber);
  },
  onInputValidated: (bool value) {
    print(value);
  },
  ignoreBlank: false,
  autoValidateMode: AutovalidateMode.disabled,
  selectorTextStyle: AppTextStyle().getSfProDisplayMedium(Colors.black),
  selectorConfig: const SelectorConfig(
    selectorType: PhoneInputSelectorType.DROPDOWN,
    setSelectorButtonAsPrefixIcon: true,
    leadingPadding: 12,
    showFlags: false,
    trailingSpace: true,
  ),
  initialValue: PhoneNumber(isoCode: 'TR'),
  textFieldController: TextEditingController(),
  formatInput: false,
  keyboardType: const TextInputType.numberWithOptions(
    signed: true, 
    decimal: true
  ),
  inputDecoration: InputDecoration(
    floatingLabelAlignment: FloatingLabelAlignment.start,
    labelText: 'Telefon Numarası',
    // 按设计稿配置label样式
    labelStyle: AppTextStyle().getSfProDisplayRegular(Colors.grey),
    floatingLabelStyle: AppTextStyle().getSfProDisplayMedium(Colors.black),
    // 自定义下拉箭头
    suffixIcon: const Icon(Icons.keyboard_arrow_down, color: Colors.grey, size: 24),
    // 配置下划线边框样式
    enabledBorder: const UnderlineInputBorder(
      borderSide: BorderSide(color: Colors.grey, width: 1)
    ),
    focusedBorder: const UnderlineInputBorder(
      borderSide: BorderSide(color: Colors.black, width: 1.5)
    ),
    // 调整垂直内边距对齐文本位置
    contentPadding: const EdgeInsets.symmetric(vertical: 12)
  ),
  textStyle: AppTextStyle().getSfProDisplayMedium(Colors.black),
  onSaved: (PhoneNumber number) {
    print('On Saved: $number');
  },
)

如果存在像素级位置偏差，微调contentPadding和leadingPadding的数值即可。

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