Flutter: Is it possible to set vertical alignment in text lines at height> 1.0?

Question

All texts in Figma have some height, for example 1.5, but when I set that height to the TextStyle, all lines with the new height are aligned to the bottom.

If using Center or Align widgets - wrong result. Examples has bottom vertical alignment in their lines. Like on bottom screenshots.

[

Is there a possibility to set vertical alignment in flutter Text wiget for every line? Or maybe someone has some helpful tips to solve the problem?

    Text(
      'Example\nExample',
      textAlign: TextAlign.center,
      style:TextStyle(
        height: 2.5,
        fontSize: 20,
      ),
    );

Solution:

As user1032613 suggested, such a solution helped.

    final text = 'Example Example\nExample Example';
    const double height = 2.5;
    const double textSize = 16.0;
    const double bottomPadding = (height * textSize - textSize) / 2;
    const double baseline = height * textSize - height * textSize / 4;
    final Widget textWidget = Container(
      color: const Color(0xFFFFFFFF),
      padding: const EdgeInsets.only(bottom: bottomPadding),
      child: Baseline(
        baselineType: TextBaseline.alphabetic,
        baseline: baseline,
        child: Text(
          text,
          style: const AppTextStyle(
            height: height,
            fontSize: textSize,
            color: const Color(0xFFaa3a3a),
          ),
        ),
      ),
    );

Desex

Answer 1

There is a property called leadingDistribution which can be used for that:

Text(
    'text',
    style: TextStyle(
        height: 2.0,
        leadingDistribution: TextLeadingDistribution.even,
        ),
)

From comments:

After modifying this field, the hot reload will not take effect and will require a hot restart

Requiescat

Note: After modifying this field, the hot reload will not take effect and will require a hot restart.🙄 – Magnetite

@Magnetite you saved me from banging my head in figuring out why this is was not working. – Whirly

It worked after hot restart thank you. – Cordless

For some reason it doesn't work for me, even after hot restarting. :( I am using an EditableText, tho, maybe it's related? – Heartburn

My issue seems related to: github.com/flutter/flutter/issues/115721 – Heartburn

Answer 2

This is a quite common problem in Flutter when using custom fonts.

The solution our team currently uses is either use a Padding or a Baseline widget and manually tweak the text to make it appear vertically centered.

Urogenital

Thanks, I thought there was a way to get it right, instead of dancing with the paddings. – Desex

Adding manual tweaks is very difficult to maintain on larger projects. I ended up using the leadingDistribution property in textstyle. this solved it throughout my app. – Means

@LeeHiggins We have tried leadingDistribution as well, but it did not solve the problem for us. In fact, it did not make any visible difference in our tests. I'm glad it worked for you, but it's probably a different issue or a different cause in your case. – Urogenital

Answer 3

This can be done by setting textHeightBehavior property of Text.

          Text(
            'text',
            style: TextStyle(
              color: Colors.black,
              height: 16 / 12,
            ),
            textHeightBehavior: const TextHeightBehavior(
              applyHeightToFirstAscent: true,
              applyHeightToLastDescent: true,
              leadingDistribution: TextLeadingDistribution.even,
            ),
          ),

Most important thing is to set leadingDistribution as TextLeadingDistribution.even.

Truc

Answer 4

I'm a little bit late, but maybe my answer could be helpful for someone. I had a Column with elements inside. Children elements contain Text and Space widgets:

     ...
     Text(
          _locale.nutritionEditDishTimeTitle.toUpperCase(),
          textAlign: TextAlign.end,
          style: TextStyle(
            color: Palette.codGray,
            fontWeight: FontWeight.bold,
            fontSize: ScreenUtil().setSp(18),
            fontFamily: "Geometria",
          ),
        ),
      Spacer(flex: 15),
...

We have a little space under text and it's a problem cause it will be bad for pixel-perfect design implementation. After I made this change the problem was gone:

     ...
       SizedBox(
                height: ScreenUtil().setSp(20) * MediaQuery.textScaleFactorOf(context),
                 child: Align(
                 alignment: Alignment.bottomCenter,
                  child: Text(
                _locale.nutritionEditDishTimeTitle.toUpperCase(),
                  textAlign: TextAlign.end,
                  style: TextStyle(
                    color: Palette.codGray,
                    fontWeight: FontWeight.bold,
                    fontSize: ScreenUtil().setSp(18),
                    fontFamily: "Geometria",
                  ),
                ),
              ),
),
              Spacer(flex: 15),
    ...

The text was wrapped and the size became normal:

Jeu

As I understand, that's because you set up the height parameter (And height 1.0 is enough to fix it in most popular cases). Thats can be ok for single line cases, but will not work for multi line text. And of course in this thread I found some general solution for this text issues. So If someone know it, or know some articles where it described. Still will be happy to see it. Thank you. – Desex

Answer 5

One way:

Align(
 alignment: Alignment.center, 
 child: Text("Text"),
),

Another way:

Center(
   child: Text("Hello World", textAlign: TextAlign.center,),
),

Donoho

No, it's for Text widget alignment, but don't work for Text in every line. – Desex

This does not fix the issue, since the line height space is added in the text widget. So you are just centering a text widget, which then has some space at the top, and so the text is not vertically centred. – Means