How do I center text vertically and horizontally in Flutter?

Question

I'd like to know how to center the contents of a Text widget vertically and horizontally in Flutter. I only know how to center the widget itself using Center(child: Text("test")) but not the content itself. By default, it's aligned to the left. In Android, I believe the property of a TextView that achieves this is called gravity.

Example of what I want:

Solution 1

Text alignment center property setting only horizontal alignment.

I used below code to set text vertically and horizontally center.

Code:

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

Solution 2

You can use TextAlign property of Text constructor.

Text("text", textAlign: TextAlign.center,)

Solution 3

I think a more flexible option would be to wrap the Text() with Align() like so:

Align(
  alignment: Alignment.center, // Align however you like (i.e .centerRight, centerLeft)
  child: Text("My Text"),
),

Using Center() seems to ignore TextAlign entirely on the Text widget. It will not align TextAlign.left or TextAlign.right if you try, it will remain in the center.

Solution 4

                       child: Align(
                          alignment: Alignment.center,
                          child: Text(
                            'Text here',
                            textAlign: TextAlign.center,                          
                          ),
                        ),

This produced the best result for me.

Solution 5

U need to use textAlign property on the Text widget. It produced the best results for me

Text(
  'Hi there',
   textAlign: TextAlign.center,                          
 )

View more solutions

Comments

[Herohtar]

I'm not sure why this was marked as the answer, as this only centers text horizontally, but the question asks for horizontally and vertically.

[Sanjeev Sangral]

@Shelly In some cases it won't work you need to add heightFactor: property also e.g : Center( heightFactor: 2.3, child: Text('SELFIE',textAlign: TextAlign.center, style: TextStyle(fontSize: 18.0, color: Colors.black, fontWeight: FontWeight.bold, ) ), ),

[Hasen]

Yes this should be removed, it doesn't answer the question.

[jeroen-meijer]

I took a look and agree. Changed this to be the correct answer since it centers horizontally and vertically.

[Nikola Jovic]

Much better answer is this one.

[aligur]

this should be the marked answer cause the question is about how to center a text in horizontal and vertical. Thank you!

[ValdaXD]

This is the answer guys, just wondering why my text was not aligning with a bigger font size, Turns out that center it's weird with text and there is a breakpoint in wich will ignore the text size. Align seems not to have this issue... love u <3

[Benjamin Charais]

This absolutely made my day. I kept trying to use the IDE wrap didn't think of the context menu. Thank you!

[Ray Coder]

Your welcome. Hope you can save your time!

[stan]

Great hint in general! That makes life a lot easier

[Victor Kwok]

If you find that the text is still not vertically centred, and you have set the height in TextStyle, remember to set leadingDistribution: TextLeadingDistribution.even as well in TextStyle.

[jeroen-meijer]

Though you're technically correct, it is a syntax error to do it in the first way you described, so yes, but I think it's clear that that's not the way to do it since it won't even let you compile :p