Flutter中如何实现文本环绕SVG的布局效果？

你当前用Row布局的问题在于：Row是水平线性布局，SVG和文本各自占据独立的水平空间，文本换行后只会在自己的Expanded区域内换行，无法延伸到SVG下方。要实现文本换行后覆盖SVG下方的效果，推荐用RichText + WidgetSpan的方案，把SVG作为文本的一部分嵌入，让文本流自动环绕它。

解决方案代码 #

Padding(
  padding: const EdgeInsets.only(left: 16.0, right: 16, bottom: 16),
  child: RichText(
    text: TextSpan(
      children: [
        WidgetSpan(
          alignment: PlaceholderAlignment.middle, // 可选top/middle/bottom，调整SVG与文本的垂直对齐
          child: Padding(
            padding: const EdgeInsets.only(right: 8.0), // 控制SVG和文本的间距
            child: SvgPicture.asset(ImageConstant.verifiedMarker),
          ),
        ),
        TextSpan(
          text: trip.formattedAddress,
          style: theme.textTheme.bodyMedium?.copyWith(height: 1.5),
        ),
      ],
    ),
    softWrap: true,
    textAlign: TextAlign.start,
  ),
)

方案说明 #

• WidgetSpan会将SVG转换为文本流中的一个"占位符"，文本内容会围绕这个占位符排列，换行后自然填充SVG下方的空间，完全符合需求。
• 通过alignment参数可以调整SVG与文本的垂直对齐方式，比如PlaceholderAlignment.middle让SVG和文本居中对齐。
• 用Padding给SVG和文本之间添加间距，优化视觉效果。

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