Flutter TextFormField 前缀位置与尺寸设置：如何实现前缀与输入框对齐不浮动

出现错位的核心原因是你使用了prefixIcon属性承载自定义文本，prefixIcon默认的布局规则是为图标设计的，自带适配图标的上下边距，和输入文本的基线对齐规则不匹配，因此会出现位置偏移。

以下是两种可行的修复方案：

方案1：改用prefix属性（更推荐） #

prefix是InputDecoration专门用于放置输入框前置自定义内容的属性，默认会和输入文本的基线对齐，适配性更好。修改后的代码如下：

TextFormField(
  autovalidateMode: AutovalidateMode.always,
  keyboardType: TextInputType.phone,
  controller: noHpField,
  decoration: const InputDecoration(
    isDense: true,
    // 替换prefixIcon为prefix
    prefix: Text("+62", style: TextStyle(fontSize: 12, fontWeight: FontWeight.bold)),
    // 调整前缀约束，可根据需要调整minWidth设置前缀和输入内容的间距
    prefixConstraints: BoxConstraints(minWidth: 32, minHeight: 0),
    icon: Icon(Icons.phone_android),
    labelText: 'No HP',
    // 统一设置内容内边距，保证垂直方向对齐一致
    contentPadding: EdgeInsets.symmetric(vertical: 12)
  ),
  validator: (String? value) {
    if (value == null || value.isEmpty) {
      return 'Mohon Isikan Data';
    }
    return null;
  },
)

方案2：为prefixIcon嵌套对齐组件 #

如果你需要保留prefixIcon的原有特性，可以给内部的文本组件嵌套Align组件强制对齐，修改代码如下：

TextFormField(
  autovalidateMode: AutovalidateMode.always,
  keyboardType: TextInputType.phone,
  controller: noHpField,
  decoration: const InputDecoration(
    isDense: true,
    prefixIcon: Align(
      alignment: Alignment.centerLeft,
      widthFactor: 1.0,
      child: Text("+62", style: TextStyle(fontSize: 12, fontWeight: FontWeight.bold)),
    ),
    prefixIconConstraints: BoxConstraints(minWidth: 32, minHeight: 0),
    icon: Icon(Icons.phone_android),
    labelText: 'No HP',
  ),
  validator: (String? value) {
    if (value == null || value.isEmpty) {
      return 'Mohon Isikan Data';
    }
    return null;
  },
)

补充说明 #

如果前缀文本和输入文本的字号不一致，可以给Text组件添加textBaseline: TextBaseline.alphabetic属性，强制两者按字母基线对齐，进一步避免错位。

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