Flutter中如何实现文字与图片的环绕排版？

你当前使用Wrap组件无法实现预期的图文环绕效果，原因是Wrap是将子组件作为独立块级元素排列，无法让文字嵌入到文本流中环绕图片。要实现RTL（阿拉伯语等右排语言）的图文环绕排版，需要使用RichText配合WidgetSpan，将图片嵌入到文本流内。

解决方案代码示例 #

RichText(
  textDirection: TextDirection.rtl, // 保持RTL排版方向
  textAlign: TextAlign.justify,
  text: TextSpan(
    children: [
      // 前置文本（可根据需要拆分，控制图片插入位置）
      TextSpan(
        text: "${_items[1]['text'].substring(0, 50)} ",
        style: GoogleFonts.notoNaskhArabic(
          fontWeight: FontWeight.w900,
          fontSize: 25,
          color: Colors.black,
        ),
      ),
      // 嵌入图片的WidgetSpan
      WidgetSpan(
        alignment: PlaceholderAlignment.middle, // 图片与文本居中对齐
        child: Container(
          width: 120,
          height: 120,
          margin: EdgeInsets.symmetric(horizontal: 8, vertical: 4),
          child: Image.network("your_image_url"), // 替换为你的图片路径/URL
        ),
      ),
      // 剩余文本
      TextSpan(
        text: _items[1]['text'].substring(50),
        style: GoogleFonts.notoNaskhArabic(
          fontWeight: FontWeight.w900,
          fontSize: 25,
          color: Colors.black,
        ),
      ),
    ],
  ),
)

关键说明 #

1. RichText + WidgetSpan：这是Flutter原生实现文本内嵌Widget的方案，图片会作为文本流的一部分，让文字自然环绕。
2. RTL适配：保持textDirection: TextDirection.rtl，确保阿拉伯语等右排文字的排版逻辑正确。
3. 文本拆分：通过拆分文本控制图片插入的位置，可根据需求调整拆分的索引值，让图片出现在合适的段落位置。

如果需要更复杂的环绕效果（比如图片居左/居右、文字全环绕），可以调整WidgetSpan的alignment和容器的margin参数，或者使用第三方包增强排版能力。

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