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.

[ Text screenshots2

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),
          ),
        ),
      ),
    );

intraector · Answer 1 · 2023-05-25T14:53:46.573

13

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

edited May 25 '23 at 14:53

answered Apr 20 '22 at 15:37

intraector

994
10
20

6

Note: After modifying this field, the hot reload will not take effect and will require a hot restart. – ipcjs Dec 19 '22 at 10:00
2

@ipcjs you saved me from banging my head in figuring out why this is was not working. – Rohan Sanap May 25 '23 at 09:38
It worked after hot restart thank you. – BarisY Aug 03 '23 at 11:34

score 2 · Accepted Answer · answered Oct 14 '21 at 19:52

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.

answered Oct 14 '21 at 19:52

WSBT

33,033
18
128
133

Thanks, I thought there was a way to get it right, instead of dancing with the paddings. – Altemora Oct 15 '21 at 14:45
2

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. – Lee Higgins Aug 03 '22 at 09:54
1

@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. – WSBT Aug 03 '22 at 15:57

score 1 · Answer 3 · answered Nov 14 '22 at 20:00

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.

score -1 · Answer 4 · answered Oct 14 '21 at 16:06

-1

One way:

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

Another way:


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

answered Oct 14 '21 at 16:06

Shahriar Nasim Nafi

1,160
15
19

No, it's for Text widget alignment, but don't work for Text in every line. – Altemora Oct 14 '21 at 16:58
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. – Lee Higgins Aug 03 '22 at 09:56

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

4 Answers4