Multiple Line Text Align Centre Vertically with Line Height

Question

I am currently trying to let the Text apply with certain line height and align the text vertically centre. Since there is no option on TextStyle to vertically align that, I have tried to use the StrutStyle with leading to approximately align it to centre. However, after setting the leading, the height for leading and Text with TextStyle height is different.

The demo can check at the dartpad.

    Text(
      'label A',
      style: const TextStyle(
        fontSize: 16.0,
        color: Colors.red,
        backgroundColor: Colors.blue,
      ),
      strutStyle: StrutStyle(
        fontSize: 16.0,
        leading: (70.0 / 16.0)/2,
        forceStrutHeight: true,
      ),
    ),

1. Want to ask if there is any proper way to align it at centre? The Text is multiple line.
2. If the leading approach is the recommend method for this case now, is there any calculation can sync the correct height using leading?

Answer 1

Wrap With Align Widget Which will help you to align wherever you want .

 Align (
      alignment : Alignment.topCenter;
    child : Text(
          'label A',
          style: const TextStyle(
            fontSize: 16.0,
            color: Colors.red,
            backgroundColor: Colors.blue,
          ),
          strutStyle: StrutStyle(
            fontSize: 16.0,
            leading: (70.0 / 16.0)/2,
            forceStrutHeight: true,
          ),
        ),
    ),