Flutter TextField需求：无焦点时始终显示前缀并与提示文本对齐

要做一个无焦点时也一直显示前缀、前缀和提示文本严格对齐的TextField，还要保留提示文本的浮动动画，不能用自定义容器（因为做不了浮动效果），之前试了prefix、prefixIcon这些都没对齐，试试下面的方案：

解决思路 #

别用prefixIcon或者prefixText了，直接把前缀和提示文本合并到label里，用富文本分别设置样式，这样不管提示文本是正常显示还是浮动，前缀都跟着一起走，自然就对齐了，而且无焦点时也能完整显示。

完整代码示例 #

Container(
  padding: EdgeInsets.all(16).r,
  decoration: BoxDecoration(
    borderRadius: BorderRadius.all(Radius.circular(8)).r,
    border: Border.all(
      width: 1,
      color: const Color(0xFFDADADA),
    ),
  ),
  child: TextField(
    decoration: InputDecoration(
      contentPadding: EdgeInsets.zero,
      alignLabelWithHint: true,
      fillColor: Colors.transparent,
      border: InputBorder.none,
      isDense: true,
      // 用RichText把前缀和提示文本整合在一起
      label: RichText(
        text: const TextSpan(
          text: 'Rp ',
          style: TextStyle(
            color: Colors.black, // 前缀的颜色和字号
            fontSize: 16,
          ),
          children: [
            TextSpan(
              text: 'Terendah',
              style: TextStyle(
                color: Colors.grey, // 提示文本的样式
                fontSize: 16,
              ),
            ),
          ],
        ),
      ),
      // 可选：自定义提示文本浮动后的样式
      floatingLabelStyle: const TextStyle(
        color: Colors.black,
        fontSize: 14,
      ),
    ),
    keyboardType: TextInputType.number,
    controller: TextEditingController(text: ''),
  ),
)

重点说明 #

• 用label替代原来的labelText：通过RichText把前缀和提示文本放在同一个元素里，保证布局上完全对齐，不会出现错位。
• alignLabelWithHint: true：确保整个提示内容（含前缀）在输入框里垂直对齐正确。
• isDense: true + contentPadding: EdgeInsets.zero：去掉输入框内部多余的间距，让内容更贴近容器边框，和你想要的效果匹配。

备选方案（用prefixText实现） #

如果非要用prefixText，可以调整约束强制对齐，但这种方法在提示文本浮动时，前缀不会跟着动，效果不如上面的方案：

Container(
  padding: EdgeInsets.all(16).r,
  decoration: BoxDecoration(
    borderRadius: BorderRadius.all(Radius.circular(8)).r,
    border: Border.all(
      width: 1,
      color: const Color(0xFFDADADA),
    ),
  ),
  child: TextField(
    decoration: InputDecoration(
      contentPadding: const EdgeInsets.symmetric(vertical: 16),
      labelText: 'Terendah',
      alignLabelWithHint: true,
      fillColor: Colors.transparent,
      border: InputBorder.none,
      isDense: true,
      prefixText: 'Rp',
      prefixStyle: const TextStyle(fontSize: 16, color: Colors.black),
      // 消除前缀默认的最小宽度限制，避免间距
      prefixIconConstraints: const BoxConstraints(minWidth: 0, minHeight: 0),
      labelStyle: const TextStyle(fontSize: 16, color: Colors.grey),
    ),
    keyboardType: TextInputType.number,
    controller: TextEditingController(text: ''),
  ),
)

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