Text with inline images in Flutter

Question

I am trying to create a layout with a left-aligned or right-aligned image and a text that wraps around the image. Is it possible to build this kind of layout with Flutter?

This is the layout I am trying to create:

Fein

I know this is reviving a relatively old question, but I think I can help you with it if you're still interested. But I need to know - would you be okay with the constraint of having to set a size for the image beforehand? It might be possible without doing that but it would certainly be a lot easier if the size is specified. – Picrite

@Picrite kindly provide your solution for this even if the asker is not responding, your answer might help others :) – Blandishment

@Picrite yes, it would be great to see your solution for this :) – Fein

Answer 1

Yes, it is now possible to build that kind of layout in Flutter. For example, this code:

import 'package:float_column/float_column.dart';

FloatColumn(
  children: [
    Floatable(
      float: FCFloat.start,
      maxWidthPercentage: 0.33,
      padding: const EdgeInsetsDirectional.only(end: 12),
      child: Image(image: AssetImage('bill-gates.jpeg')),
    ),
    const WrappableText(
        text: TextSpan(
            text: 'A floating image',
            style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold))),
    const WrappableText(
        text: TextSpan(
            text:
                'Iste quidem veteres inter ponetur honeste...')),
  ],
)

Produces this:

Forehead

Great package. This should be the accepted answer. The drop_cap_text package mentioned in another answer is limited to only 1 image. – Doorkeeper

Answer 2

I published a package: drop_cap_text to achive DropCapText, you can also insert an image as a custom DropCap, result below

DropCapText(
  loremIpsumText,
  dropCap: DropCap(
  width: 100,
  height: 100,
  child: Image.network(
    'https://www.codemate.com/wp-content/uploads/2017/09/flutter-logo.png')
  ),
),

Achene

Great plugin. But would it be possible to specify a different font size for the header text and the body text? – Schroder

I'm using this plugin and I hove an issue: github.com/mtiziano/drop_cap_text/issues/14 – Pavlov

Answer 3

Now simply you can achieve this using the Flutter Text.rich() widget.

const Text.rich(
  TextSpan(
    children: <InlineSpan>[
      TextSpan(text: 'Flutter is'),
      WidgetSpan(
        child: SizedBox(
          width: 120,
          height: 50,
          child: Card(
            child: Center(
              child: Text('Hello World!')
            )
          ),
        )
      ),
      TextSpan(text: 'the best!'),
    ],
  )
)

More details here.

Butterwort

Answer 4

Sadly for now this kind of text wrap is not supported in Flutter. You can wrap text in front of the picture but not below it.

Spendable

Answer 5

@Tiziano works in a specific case. For more general cases with complicated inline image, for now I can see other way than using inline HTML webview and style="float: left" HTML attribute. I'm making a PR for this feature (webview loading HTML string) https://github.com/flutter/plugins/pull/1312

const WebView(
              htmlString: """
<u><em><strong>You can do HTML too!</strong></em></u><br />
<img src="https://upload.wikimedia.org/wikipedia/commons/1/17/Google-flutter-logo.png" style="float: left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<img src="https://upload.wikimedia.org/wikipedia/commons/1/17/Google-flutter-logo.png" style="float: right"> 
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
              """,
            ),

Perspiration

Answer 6

You can create a Container and clip it with ClipPath in the shape of your text. After that, to put everything together you add both this Container and Image in a Stack.

Widget build(BuildContext context) {
    return Stack(
        children: [
            _buildImageWidget(),
            ClipPath(
                clipper: MyCustomClipper(),
                child: _buildTextWidget(),
            ),
        ],
    );
}

And in your custom CustomClipper you just cut the portion where the image should occupy and Flutter will make sure to not render any child Widget in that portion.

Normand

I tried this, and it will indeed clip the text. But it will not route the text around it. So it just obscures the text – Gift