Flutter中TextFormField使用suffixIcon时如何消除额外间距？

出现这个问题的核心原因是suffixIcon默认的容器会占据额外的垂直空间，导致输入框整体高度被撑开，进而让提示文本（labelText）和下划线之间的间距变大。以下是几种有效的解决方法：

方法1：使用suffix替代suffixIcon自定义图标容器 #

suffix可以直接传入自定义Widget，你可以通过约束容器尺寸来控制图标占用的空间，避免撑开输入框高度：

TextFormField(
  decoration: InputDecoration(
    labelText: "New Password",
    // 用ConstrainedBox限制图标容器大小
    suffix: ConstrainedBox(
      constraints: const BoxConstraints(
        maxHeight: 24,
        maxWidth: 24,
      ),
      child: const Icon(Icons.visibility, size: 20),
    ),
  ),
)

方法2：通过suffixIconConstraints约束图标容器 #

Flutter提供了专门的suffixIconConstraints属性，用来限制suffixIcon所在容器的尺寸，直接覆盖默认的容器大小：

TextFormField(
  decoration: InputDecoration(
    labelText: "Confirm Password",
    suffixIcon: const Icon(Icons.visibility),
    // 自定义图标容器的最小/最大尺寸
    suffixIconConstraints: const BoxConstraints(
      minWidth: 24,
      minHeight: 24,
      maxWidth: 32,
      maxHeight: 32,
    ),
  ),
)

方法3：调整contentPadding抵消额外空间 #

手动减小输入框的垂直内边距，抵消suffixIcon带来的高度撑开效果：

TextFormField(
  decoration: InputDecoration(
    labelText: "New Password",
    suffixIcon: const Icon(Icons.visibility),
    // 减小垂直方向的内边距，按需调整数值
    contentPadding: const EdgeInsets.symmetric(vertical: 8, horizontal: 16),
  ),
)

注意：直接设置Icon的size属性通常无效，因为suffixIcon的容器有默认的最小尺寸，必须约束容器本身的大小才能解决间距问题。

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