如何在Container中调整intl_phone_number_input国家码内边距并解决溢出问题

解决方法 #

针对你遇到的两个问题，调整代码如下即可：

1. 国家码区域左侧内边距调整
   intl_phone_number_input 的国家选择器区域的内边距不受inputDecoration控制，需要通过selectorConfig下的selectorPadding参数单独配置，你可以直接给它加左侧内边距解决紧贴左侧的问题。
2. 校验时渲染溢出问题
   你当前给外层Container设置了固定高度55.0，校验触发时错误提示文本会占用额外高度，超出固定高度就会触发溢出报错，两个优化方案可选：

• 直接去掉外层Container的固定height属性，让组件自适应高度
• 若必须限制高度，可给InputDecoration添加isDense: true，同时缩小contentPadding的vertical数值，减少文本区域占用的高度

修改后的完整代码

Container(
  width: MediaQuery.of(context).size.width * 0.9,
  // 建议去掉固定高度，自适应即可
  // height: 55.0,
  decoration: BoxDecoration(
    border: Border.all(color: HexColor("#6e6b7b")),
    color: Colors.white,
    borderRadius: BorderRadius.all(Radius.circular(10)),
  ),
  child: InternationalPhoneNumberInput(
    inputDecoration: InputDecoration(
      isDense: true, // 可选，压缩组件高度
      contentPadding: EdgeInsets.symmetric(vertical: 15.0, horizontal: 10.0),
      labelText: "Phone number",
      labelStyle: GoogleFonts.montserrat(color: HexColor("#6e6b7b")),
      hintStyle: GoogleFonts.montserrat(),
      hintText: "Enter a phone number",
      border: InputBorder.none,
      focusedBorder: InputBorder.none,
      enabledBorder: InputBorder.none,
      errorBorder: InputBorder.none,
      focusedErrorBorder: InputBorder.none,
    ),
    onInputChanged: (PhoneNumber number) {
      print(number.phoneNumber);
    },
    onInputValidated: (bool value) {
      print(value);
    },
    selectorConfig: SelectorConfig(
      selectorType: PhoneInputSelectorType.DIALOG,
      // 这里给国家选择器加左侧内边距，按需调整数值
      selectorPadding: EdgeInsets.only(left: 12),
    ),
    ignoreBlank: false,
    autoValidateMode: AutovalidateMode.onUserInteraction,
    selectorTextStyle: TextStyle(color: Colors.black),
    textFieldController: contactNo,
    formatInput: false,
    keyboardType: TextInputType.numberWithOptions(signed: true, decimal: true),
    inputBorder: InputBorder.none,
    onSaved: (PhoneNumber number) {
      print('On Saved: $number');
    },
  ),
),

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