Flutter TextField输入内容变化时隐藏前缀图标后文本错乱问题

你遇到的文本错乱问题，根源在于切换prefixIcon时直接替换了不同类型的组件（Container和IconButton），导致TextField的布局结构发生突变，触发重建时干扰了文本的光标位置或渲染状态。以下是两种可行的解决办法：

方案1：用Visibility组件控制图标可见性 #

保持prefixIcon的组件结构不变，仅通过Visibility控制显示/隐藏，避免布局突变：

TextField(
  controller: messageInputController,
  onChanged: (value) {
    messageInputChanged();
  },
  decoration: InputDecoration(
    counterText: '',
    prefixIcon: Visibility(
      visible: showPrefixIcon,
      child: Padding(
        padding: const EdgeInsets.all(0),
        child: IconButton(
          onPressed: () {
            imagePickerBottomSheet();
          },
          iconSize: 40,
          color: Skin.gray,
          icon: SvgPicture.asset(
            'assets/svg/ic-image.svg',
            height: 22,
            color: Skin.gray,
          ),
        ),
      ),
    ),
  ),
)

方案2：用固定尺寸的SizedBox占位空状态 #

隐藏图标时，用和IconButton尺寸一致的SizedBox占位，维持布局宽度稳定：

TextField(
  controller: messageInputController,
  onChanged: (value) {
    messageInputChanged();
  },
  decoration: InputDecoration(
    counterText: '',
    prefixIcon: showPrefixIcon
        ? Padding(
            padding: const EdgeInsets.all(0),
            child: IconButton(
              onPressed: () {
                imagePickerBottomSheet();
              },
              iconSize: 40,
              color: Skin.gray,
              icon: SvgPicture.asset(
                'assets/svg/ic-image.svg',
                height: 22,
                color: Skin.gray,
              ),
            ),
          )
        : SizedBox(width: 40), // 与IconButton的iconSize保持一致
  ),
)

原理说明 #

两种方案的核心都是保持TextField前缀区域的布局尺寸稳定，避免因组件替换导致TextField重新计算文本渲染区域，从而防止光标偏移、文本错位等问题。

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