Align image next to text in flutter on base line in Flutter

Question

I am having trouble placing a logo next to some text and properly aligning it vertically. The PNG dimensions of the logo png are about 750x256. I want it to be the same size as an upper case letter in the text next to it. I therefore set the font size to 28 and the image height to 20. I would assume that by putting it into a row with cross axis alignment baseline, the image should be placed at the baseline, yet it is placed on the top.

Here is my code:

static Widget _buildLogo() {
  return Row(
    mainAxisAlignment: MainAxisAlignment.center,
    crossAxisAlignment: CrossAxisAlignment.baseline,
    textBaseline: TextBaseline.alphabetic,
    children: [
      SizedBox(width: 15.0),
      Image.asset("assets/images/header-logo-red_256_solid.png", height: 20),
      SizedBox(width: 10.0),
      Text('Text',
        style: TextStyle(
          fontSize: 28.0,
          backgroundColor: Colors.green
        )
      ),
    ]
  );
}

and this is how it looks:

I would like it to be like this (I added a line to indicate the alphabetic baseline):

EDIT: Quick explanation: What I want to achieve is the default HTML behavior that you would get in the following code snippet?

<html>
<body>
<img src="logo.png" /><font size=200>laBlaBla</font>
</body>
</html>

I am not sure you can do this with image as child. According to [docs](https://api.flutter.dev/flutter/rendering/CrossAxisAlignment-class.html): `Children who report no baseline will be top-aligned.`. And you image seems to not report. — Peter Koltai, Oct 17 '21 at 12:22

Searles · Accepted Answer · 2021-12-06T14:20:40.013

I finally found the solution.

With Row it is not possible without changing the RenderingBox, yet it is possible with RichText. The secret is to use the proper baseline/alignment.

    RichText(
      text: TextSpan(
        children: [
          WidgetSpan(child: Image.asset("assets/images/logo.png"), baseline: TextBaseline.alphabetic, alignment: PlaceholderAlignment.baseline),
          TextSpan(text: "laBlaBla", style: TextStyle(fontSize: 48),)
        ]
      )
    ),

EDIT: Bit of caution though, this solution also does not always work as expected.

Align image next to text in flutter on base line in Flutter

1 Answers1