如何垂直对齐 Flutter 文本小部件？

Question

I am trying to align these text widgets vertically so that they are perfectly centered between the two lines. However, flutter sees the size of the text widget to be as big as the red rectangle behind the text (Background color of text only for illustration purposes) because of the decender line. However, this results in the text looking a bit offcentered. Is there a way to align the text using the baseline and not the decender?

Answer 1

Play with the text height (line-height)

Text('Hey There', 
  style: TextStyle(height: 5, fontSize: 10),
)

Answer 2

You can try Align widget just wrap your text with Align and provide your alignment

Answer 3

Wrap it in a center widget

Center(
    child: Text(
      "PAYMENT",
      style: TextStyle(
        backgroundColor: Colors.blue,
        fontSize: 20,
      ),
      textAlign: TextAlign.center,
    ),
)

Dartpad:

https://dartpad.dev/flutter?null_safety=true&id=3b0bf085892c1867012f5dd00713ccf7

Answer 4

I think what your looking for is to use the " CrossAxisAlignment " attribute in the Column widget.

Column(
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    Text('Delivery'),
    Text('Payment'),
    Text('Total'),
  ],
)