Flutter自定义电话号码输入组件样式适配求助

根据你提供的代码和效果差异，以下是针对性的修改建议，帮你匹配设计图样式：

1. 调整国家选择器的布局与样式 #

默认的前缀图标模式可能导致布局和设计不符，改为直接展示选择器按钮，并自定义按钮样式：

selectorConfig: SelectorConfig(
  leadingPadding: 8, // 根据设计调整左侧间距
  selectorType: PhoneInputSelectorType.DIALOG,
  setSelectorButtonAsPrefixIcon: false, // 取消前缀图标模式，改为内联按钮
  useBottomSheetSafeArea: true,
),
// 添加选择器按钮样式，匹配设计
selectorButtonStyle: ButtonStyle(
  padding: MaterialStateProperty.all(EdgeInsets.symmetric(horizontal: 12, vertical: 8)),
  shape: MaterialStateProperty.all(RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(8), // 匹配设计的圆角
    side: BorderSide(color: Colors.grey.shade300), // 设计图若有边框则添加
  )),
  backgroundColor: MaterialStateProperty.all(ComponentColors.overlayColor), // 和输入框背景一致
),

2. 优化输入框内部布局 #

调整输入框的内边距，确保选择器和输入文本的间距合理：

inputDecoration: InputDecoration(
  hintText: strings.hint_phone,
  hintStyle: TextStyle(
    color: Colors.grey,
    fontSize: 16,
    fontWeight: FontWeight.w400, // 和设计的占位符样式统一
  ),
  fillColor: ComponentColors.overlayColor,
  contentPadding: EdgeInsets.symmetric(
    vertical: 12, // 调整垂直内边距，让文本垂直居中
    horizontal: 16, // 右侧内边距，左侧由选择器间距控制
  ),
  filled: true,
  border: OutlineInputBorder(
    borderSide: BorderSide(color: Colors.grey.shade300), // 若设计有边框则添加，否则设为none
    borderRadius: BorderRadius.all(Radius.circular(10)),
  ),
  enabledBorder: OutlineInputBorder(
    borderSide: BorderSide(color: Colors.grey.shade300), // 未激活状态边框
    borderRadius: BorderRadius.all(Radius.circular(10)),
  ),
),

3. 统一文本样式 #

确保国家码文本和输入文本的样式与设计一致：

selectorTextStyle: TextStyle(
  color: Colors.black,
  fontSize: 16,
  fontWeight: FontWeight.w400, // 和输入文本字重统一
),
textStyle: TextStyle(
  color: phoneController.text.isEmpty
      ? ComponentColors.secondaryColor
      : Colors.black,
  fontWeight: FontWeight.w400,
  fontSize: 16,
),

4. 移除冗余配置 #

inputBorder参数和inputDecoration里的border配置重复，直接删除单独的inputBorder行即可。

修改后的完整代码示例 #

InternationalPhoneNumberInput(
  onInputChanged: (PhoneNumber phone) {
    controller.onChangePhone(phone);
  },
  onInputValidated: (bool value) {
    setState(() {
      validPhone = value;
    });
  },
  selectorConfig: SelectorConfig(
      leadingPadding: 8,
      selectorType: PhoneInputSelectorType.DIALOG,
      setSelectorButtonAsPrefixIcon: false,
      useBottomSheetSafeArea: true),
  selectorButtonStyle: ButtonStyle(
    padding: MaterialStateProperty.all(EdgeInsets.symmetric(horizontal: 12, vertical: 8)),
    shape: MaterialStateProperty.all(RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(8),
      side: BorderSide(color: Colors.grey.shade300),
    )),
    backgroundColor: MaterialStateProperty.all(ComponentColors.overlayColor),
  ),
  searchBoxDecoration: InputDecoration(
    hintText: strings.registration_phone_country,
    hintStyle: const TextStyle(
        color: Colors.grey, fontSize: 16, fontWeight: FontWeight.w400),
    border: InputBorder.none,
    icon: SvgPicture.asset(Assets.search),
  ),
  ignoreBlank: false,
  locale: '${Get.locale}',
  autoValidateMode: AutovalidateMode.onUserInteraction,
  selectorTextStyle: const TextStyle(
    color: Colors.black,
    fontSize: 16,
    fontWeight: FontWeight.w400,
  ),
  initialValue: null,
  textFieldController: phoneController,
  textStyle: TextStyle(
    color: phoneController.text.isEmpty
        ? ComponentColors.secondaryColor
        : Colors.black,
    fontWeight: FontWeight.w400,
    fontSize: 16,
  ),
  inputDecoration: InputDecoration(
    hintText: strings.hint_phone,
    hintStyle: const TextStyle(
      color: Colors.grey,
      fontSize: 16,
      fontWeight: FontWeight.w400,
    ),
    fillColor: ComponentColors.overlayColor,
    contentPadding: const EdgeInsets.symmetric(
      vertical: 12,
      horizontal: 16,
    ),
    filled: true,
    border: const OutlineInputBorder(
      borderSide: BorderSide(color: Colors.grey.shade300),
      borderRadius: BorderRadius.all(Radius.circular(10)),
    ),
    enabledBorder: const OutlineInputBorder(
      borderSide: BorderSide(color: Colors.grey.shade300),
      borderRadius: BorderRadius.all(Radius.circular(10)),
    ),
  ),
  errorMessage: strings.registration_error_phone,
);

额外调整建议 #

• 如果设计图中国家选择器带有下拉箭头，可通过selectorButtonIcon替换图标：

  selectorButtonIcon: Icon(Icons.keyboard_arrow_down, color: Colors.black),
  

• 若需要微调选择器和输入框的间距，可调整selectorConfig里的leadingPadding或inputDecoration里的contentPadding数值。

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