Flutter如何实现文字环绕图片？RichText与Wrap尝试失败

需求说明 #

我希望在Flutter中实现文字环绕图片的效果，预期效果如下：

我尝试使用RichText（Text.rich）和Wrap组件，但都没能得到预期效果，以下是尝试过程及结果：

RichText（Text.rich）[不符合需求] #

使用Text.rich搭配WidgetSpan的效果如下：

对应的代码：

Scaffold(
      appBar: AppBar(
        title: Text('使用Rich Text (Text.rich) 实现图文环绕测试'),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(20),
          child: SizedBox(
            width: 400,
            child: Text.rich(
              TextSpan(
                children: <InlineSpan>[
                  WidgetSpan(
                    child: Image.network(
                      'https://picsum.photos/250?image=9',
                      width: 200,
                      height: 200,
                    ),
                  ),
                  TextSpan(
                    text:
                        "loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum",
                  )
                ],
              ),
            ),
          ),
        ),
      ),
    );

我还尝试给WidgetSpan添加alignment: PlaceholderAlignment.middle，结果仍不符合需求：

Wrap组件[不符合需求] #

使用Wrap组件的效果如下：

对应的代码：

Scaffold(
      appBar: AppBar(
        title: Text('使用Wrap实现图文环绕测试'),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(20),
          child: SizedBox(
            width: 400,
            child: Wrap(
              children: [
                Image.network(
                  'https://picsum.photos/250?image=9',
                  width: 200,
                  height: 200,
                ),
                Text(
                  "loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum",
                )
              ],
            ),
          ),
        ),
      ),
    );

解决方案 #

Flutter原生组件没有直接支持文字环绕图片的能力，可通过以下两种方式实现：

方法一：使用第三方库（推荐） #

借助成熟的第三方库可以快速实现效果，比如flutter_text_wrap或flutter_flow_widgets。以flutter_text_wrap为例：

1. 在pubspec.yaml中添加依赖：

dependencies:
  flutter_text_wrap: ^0.2.0

2. 调用组件实现效果：

SizedBox(
  width: 400,
  child: TextWrap(
    image: Image.network(
      'https://picsum.photos/250?image=9',
      width: 200,
      height: 200,
    ),
    text: "loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum",
    imagePosition: ImagePosition.left,
    padding: EdgeInsets.all(8),
  ),
)

方法二：自定义布局（不依赖第三方库） #

如果不想引入外部依赖，可以通过手动拆分文本结合基础布局组件模拟效果，适合简单场景：

SizedBox(
  width: 400,
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      // 第一行：图片+部分文本
      Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Image.network(
            'https://picsum.photos/250?image=9',
            width: 200,
            height: 200,
          ),
          SizedBox(width: 8),
          Expanded(
            child: Text(
              "loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum",
            ),
          ),
        ],
      ),
      SizedBox(height: 8),
      // 剩余文本自动铺满宽度
      Text(
        "loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum",
      ),
    ],
  ),
)

这种方法需要手动拆分文本，若文本长度动态变化，需额外计算换行位置，逻辑相对复杂。

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