How to insert image in Dart Text() being wrapped?

Issue

I'm trying to put an image inside a long text being wrapped in a Dart AlertDialog() widget. Let me illustrate the problem with some images.

What I want:

What I want

What I have:

What I have

(The coin Image() is flushed to the line after my text while I want it being part of it).

I'm currently trying to use the Wrap() widget, see the minimal code below

Wrap(children: [
        Flexible(
            child: Text('Are you sure you want to buy this item for ' +
                item.price.toString())),
        Padding(
            padding: const EdgeInsets.fromLTRB(5, 0, 0, 5),
            child: Image.asset(
              "path/to/my/image",
              width: 30,
            )), 
        Text('?'),
      ]),

It is supposed to place its children's widgets below each other when reaching the width of the Wrap() context. However, it's not working as I would like, since it put the Image widget below the Text() one being wrapped by Flexible() instead of putting it next to this last.

My opinion about this problem is that the wrapping of a text line still creates a "text box" that will go until the end of the context width (i.e. the end of the line) even if the last line of text stops earlier. This is due to the fact that the previous line had obviously reached the width of the Wrap() context. This is probably why the Image.assets() inserted as the next widget in the Wrap() children list is flushed to the next line anyway.

Of course I've tried several other approaches, namely to use the Row() widget with the Text() widget wrapped inside a Flexible() widget as follow:

Row(children: [
            const Flexible(
                child: Text(
              'Are you sure you want to buy this item for ' + item.price.toString(),
            )),
            Row(children: [
              Padding(
                  padding: const EdgeInsets.fromLTRB(5, 0, 0, 5),
                  child: Image.asset(
                    "path/to/my/image",
                    width: 30,
                  )),
              Text('?'),
            ]),

Which of course does not work since it places the Image() widget not next to the last word of the wrapped text but next to the whole generated Flexible() text zone.

Of course, the problem comes with the fact that the text is long and is, therefore, broken into several lines. The first approach would have worked perfectly if the text was not broken into several lines.

Is there any way to either

• Limit the size of a wrapped line in order to avoid it being considered as a full line when wrapped;
• Insert an image as a text character so that only the use of Flexible() do the trick to solve this problem;
• Break a row widget into several lines automatically.

Thanks in advance for your time

Solution

Try Text.rich:

Text.rich(TextSpan(
      children: <InlineSpan>[
        TextSpan(text: 'Flutter is'),
        WidgetSpan(
            child: Padding(
            padding: const EdgeInsets.fromLTRB(5, 0, 0, 5),
            child: Image.asset(
              "path/to/my/image",
              width: 30,
            ),),),
        TextSpan(text: '?'),
      ],
    )

Answered By - Jim