CODEWITHSUNDEEP
flutterdartflutter-imageflutter-textgoogle-flexible
Guilian Deflandre
Guilian Deflandre

Reputation: 33

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

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

Thanks in advance for your time

Upvotes: 0

Views: 1592

Answers (2)

Jim
Jim

Reputation: 7601

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

Upvotes: 2

Emile Fournout
Emile Fournout

Reputation: 1

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

Upvotes: 0

Related Questions