Flutter TextFormField后缀文本无法垂直居中如何实现响应式适配？

出现该问题的核心原因是Flutter中InputDecoration的suffixIcon默认适配Material Design图标规范，自带了最小48*48的尺寸约束，同时默认子元素顶对齐，因此直接放入Text组件会出现垂直偏移，手动设置固定padding也无法适配多端字体、尺寸差异。

方案1：适配suffixIcon使用场景（后缀固定在最右侧、需要点击交互时使用） #

保留suffixIcon的前提下，取消默认约束并包裹居中组件即可实现自适应居中，修改InputDecoration的对应代码如下：

decoration: InputDecoration(
  labelText: "Price",
  // 新增：取消suffixIcon的默认最小尺寸约束
  suffixIconConstraints: BoxConstraints(
    minWidth: 0,
    minHeight: 0,
  ),
  suffixIcon: Padding(
    // 可按需设置左右边距，避免贴紧输入框边框
    padding: EdgeInsets.only(right: 8),
    child: Align(
      alignment: Alignment.center,
      widthFactor: 1,
      child: Text(
        currencySet == 1
            ? r"$"
            : currencySet == 2
                ? r"AED"
                : currencySet == 3
                    ? r"PKR"
                    : currencySet == 4
                        ? r"SR"
                        : currencySet == 5
                            ? r"£"
                            : '',
        style: TextStyle(
            color: kPrimaryColor,
            fontFamily: 'SegoeUI-Bold'),
      ),
    ),
  ),
  // 其余原有属性保持不变
)

方案2：使用suffix属性（静态后缀文本、跟在输入值后时推荐，更简单） #

如果你的货币单位只是静态展示不需要点击、且允许跟在输入的数值末尾，直接替换suffixIcon为suffix属性即可，该属性本来就是为后缀文本设计，默认和输入框文本垂直对齐，不需要额外调整约束：

decoration: InputDecoration(
  labelText: "Price",
  // 直接用suffix代替suffixIcon
  suffix: Text(
    currencySet == 1
        ? r"$"
        : currencySet == 2
            ? r"AED"
            : currencySet == 3
                ? r"PKR"
                : currencySet == 4
                    ? r"SR"
                    : currencySet == 5
                        ? r"£"
                        : '',
    style: TextStyle(
        color: kPrimaryColor,
        fontFamily: 'SegoeUI-Bold'),
  ),
  // 其余原有属性保持不变
)

两种方案都不需要手动设置固定垂直padding，可以自适应不同屏幕尺寸、字体大小的居中需求。

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