Flutter TextFormField带图标后缀：如何避免文本对齐至图标占位区？

问题表现 #

当前使用TextFormField时，设置suffix图标后，输入框内所有文本行都会被图标的占位挤压，导致每行宽度变窄：

当前代码 #

TextFormField(
  maxLines: null,
  maxLength: 2000,
  decoration: const InputDecoration(                 
    suffix: Icon(Icons.paste_outlined),
  ),
),

期望效果 #

图标仅固定在输入框第一行末尾，后续文本行不受图标占位影响，正常铺满输入框宽度：

解决方案 #

不要使用InputDecoration自带的suffix属性（它会占据输入框固定宽度，影响全局文本布局），改用Stack将输入框与图标叠加，通过定位让图标固定在第一行右上角，同时给输入框右侧留出足够内边距避免文本被遮挡。

示例代码：

Stack(
  alignment: Alignment.topRight,
  children: [
    TextFormField(
      maxLines: null,
      maxLength: 2000,
      decoration: const InputDecoration(
        border: OutlineInputBorder(),
        // 右侧留足够空间，避免第一行文本被图标遮挡
        contentPadding: EdgeInsets.symmetric(horizontal: 16, vertical: 12)
            .copyWith(right: 48),
      ),
    ),
    Positioned(
      top: 12,
      right: 16,
      child: IconButton(
        icon: const Icon(Icons.paste_outlined),
        onPressed: () {
          // 在此添加粘贴操作逻辑
        },
        padding: EdgeInsets.zero,
        constraints: const BoxConstraints(),
      ),
    ),
  ],
)

方案说明 #

1. 通过Stack将TextFormField和图标置于同一层级，实现图标悬浮在输入框上方的效果
2. Positioned精确控制图标的位置，使其对齐第一行末尾
3. 给TextFormField的contentPadding设置更大的右侧内边距，确保第一行文本不会被图标遮挡，后续行文本可正常铺满输入框宽度

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