Search code examples
flutterdartbaseline

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

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:

enter image description here

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

enter image description here

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>

HTML-Baseline alignment

Solution

  • 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 baseline

        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.