Flutter中如何将Widget与文本内联显示且不强制换行？

需求与问题 #

需要在文本块末尾插入图标类Widget，要求：

• 图标必须和文本最后一个单词内联，不能单独换行到新行（避免左侧无文字、仅图标占一行的情况）
• 文本过长时自动截断显示
• 文本较短时允许单词拆分换行

此前尝试用Row包裹最后一个字符和图标，但部分场景下无法让最后一个单词正常换行，导致图标单独占行。

解决方案 #

使用Text.rich结合WidgetSpan，并添加零宽空格（\u200B）将最后一个单词与图标绑定，确保排版时二者不会被拆分。代码示例如下：

Text.rich(
  TextSpan(
    children: [
      TextSpan(
        text: title,
        style: textStyle,
      ),
      // 零宽空格：让图标与最后一个单词成为排版整体，避免单独拆分
      const TextSpan(text: '\u200B'),
      WidgetSpan(
        alignment: PlaceholderAlignment.middle,
        child: Padding(
          padding: const EdgeInsets.only(left: 6.0),
          child: icon,
        ),
      ),
    ],
  ),
  overflow: TextOverflow.ellipsis, // 文本过长时显示省略号
  softWrap: true, // 允许文本正常换行
)

原理说明 #

• 零宽空格（\u200B）是不可见的排版字符，Flutter的文本引擎会将其前后的内容视为连续单元，从而避免图标被单独拆分到新行。
• TextOverflow.ellipsis确保文本超出容器宽度时自动截断并显示省略号，符合长文本需求。
• softWrap: true保留文本正常换行能力，同时保证图标始终与最后一个单词绑定。

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