Wrapping image with text. RichText and Wrap do not work

Question

What I want:

I would like to wrap some text around an image in Flutter. Since there are already many questions about that, what I mean by "wrapping some text around an image" is this:

To achieve that, I've tried using both RichText and Wrap classes, without success. What I'm getting with:

RichText (Text.rich) [not what I want]:

Scaffold(
      appBar: AppBar(
        title: Text('Wrap Image with text using Rich Text (Text.rich) test'),
      ),
      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",
                  )
                ],
              ),
            ),
          ),
        ),
      ),
    );

I've also tried adding alignment: PlaceholderAlignment.middle to WidgetSpan in the code above, getting the following result (also, not what I want):

Wrap [not what I want]:

Scaffold(
      appBar: AppBar(
        title: Text('Wrap Image with text using Wrap test'),
      ),
      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",
                )
              ],
            ),
          ),
        ),
      ),
    );

How can I achieve what I want in Flutter?

Answer 1

There’s an old package called drop_cap_text that does exactly what you need, allowing you to wrap text around an image. However, it hasn't been updated to be compatible with newer versions of Flutter. Fortunately, you can use this fork of the package until the changes are merged into the original package.

For that, add the following to your pubspec.yaml file to include the updated package:

dependencies:
  drop_cap_text:
    git:
      url: [email protected]:parlough/drop_cap_text.git
      ref: feat/adapt-for-deprecations

After that, you can use the package like this:

DropCapText(
  'loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum',
  dropCapPadding: const EdgeInsets.only(right: 8, bottom: 8), // Padding between the text and the image
  dropCap: DropCap(
    width: 200, // Set the width of the image
    height: 200, // Set the height of the image
    child: Image.network('https://picsum.photos/250?image=9'),
  ),
)