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

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 widgets below each other when reaching the width of the Wrap() context. However, it's not working has 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 create 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 place 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 break into several lines. The first approach would have work perfectly if the text was not break into several lines.

Is there any way to either

Limit the size of a wrapped line in order to avoid it being considered as 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 line automatically.

Thanks in advance for your time

CodePudding user response：

I think the text widget extends to the end of the line which prevents the image from getting behind. To solve this problem I propose to split the first sentence into two blocks of text like this:

Wrap(children: [
    Flexible(
        child: Text('Are you sure you want to')),

    Flexible(child: Text('buy this item for ' )),
    Padding(
        padding: const EdgeInsets.fromLTRB(5, 0, 0, 5),
        child: Image.asset(
          "path/to/my/image",
          width: 30,
    Text('?'),
  ]),

Other way is to look on the way of Stack widget which seem to be a good solution

CodePudding user response：

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: '?'),
      ],
    )