Children of Wrap widget not in the same line when overflowing

Issue

I'm using Wrap widget to solve my overflow problems:

Wrap(
      children: [
        Text(subtitle, style: TextStyle(color: Color(COLOR_PRIMARY),fontSize: 12.5)),
        Image(
          image: AssetImage(
              drinkNameToImage[widget.post.cocktail] as String),
          width: 20,
          height: 20,
        )
      ],
    ),

And when my row of text doesn't overflow everything works fine and looks like this

But when the line overflows it looks like this:

I'd like to have the image next to the text United States, how can I fix?

Solution

On your Wrap widget, it is having two Text and Image widgets and based on wrap nature it is working fine. Because while Text widget is taking full width, it will eventually go to next line.

Text widget is taking 1st two lines because it is not having enough spaces and after United States text, rest space is cover by Text widget. You can check it by widget-inspector, or simply wrap with a Container widget and provide color.

In your case you need to use RichText instead of Wrap.

 RichText(
                text: TextSpan(
                  children: [
                    TextSpan(
                      text: subtitle,
                      style: TextStyle(
                          //color: Color(COLOR_PRIMARY),
                          fontSize: 12.5),
                    ),
                    WidgetSpan(
                        child: Image(
                      image: AssetImage(
                        drinkNameToImage[widget.post.cocktail] as String,
                      ),
                      width: 20,
                      height: 20,
                    ))
                  ],
                ),
              ),

Check To learn more about RichText

Answered By - Yeasin Sheikh