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:

score 522 · Accepted Answer · edited Jan 05 '20 at 01:14

522

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

edited Jan 05 '20 at 01:14

jeroen-meijer

2,664
2
13
16

answered Nov 21 '18 at 07:21

Shelly Pritchard

10,777
4
18
17

2

@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, ) ), ), – Sanjeev Sangral May 24 '19 at 07:37
I took a look and agree. Changed this to be the correct answer since it centers horizontally and vertically. – jeroen-meijer Sep 20 '19 at 12:08
2

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. – Victor Kwok Dec 17 '21 at 08:19

score 112 · Answer 2 · edited Sep 09 '18 at 17:16

112

You can use TextAlign property of Text constructor.

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

edited Sep 09 '18 at 17:16

nbro

15,395
32
113
196

answered May 27 '18 at 16:22

Tree

29,135
24
78
98

61

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. – Herohtar Feb 21 '19 at 03:06
4

Yes this should be removed, it doesn't answer the question. – Hasen Jul 07 '19 at 10:59

score 87 · Answer 3 · answered Jun 05 '19 at 06:12

87

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.

answered Jun 05 '19 at 06:12

Mike

1,349
1
17
23

3

Much better answer is this one. – Nikola Jovic Jan 29 '20 at 08:38
this should be the marked answer cause the question is about how to center a text in horizontal and vertical. Thank you! – aligur Feb 01 '20 at 13:15
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 – RegularGuy Aug 27 '20 at 15:25
1

You may need to set `TextStyle( leadingDistribution: TextLeadingDistribution.even)` too for large fonts to get them centered properly vertically. – dan-gph Sep 15 '22 at 10:05

score 17 · Answer 4 · edited Mar 13 '23 at 10:33

Wrap your text widget with Align and set alignment to Alignment.center.

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

This produced the best result for me.

score 11 · Answer 5 · answered Jan 20 '22 at 10:58

11

THE TEXT TITLE MUST BE ALWAYS ON TOP.

wrong way:

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

right way:

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

answered Jan 20 '22 at 10:58

Samuel Quiroz

191
2
5

4

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 – jeroen-meijer Jun 08 '22 at 15:02

score 10 · Answer 6 · edited Mar 07 '23 at 07:47

10

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

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

edited Mar 07 '23 at 07:47

Saad

539
2
19

answered Sep 14 '21 at 09:10

Kasujja Muhammed

422
6
11

score 7 · Answer 7 · edited Oct 24 '20 at 09:09

7

If you are a intellij IDE user, you can use shortcut key Alt+Enter and then choose Wrap with Center and then add textAlign: TextAlign.center

edited Oct 24 '20 at 09:09

Ray

394
3
11

answered Jun 25 '20 at 06:57

Ray Coder

1,022
3
15
30

1

This absolutely made my day. I kept trying to use the IDE wrap didn't think of the context menu. Thank you! – Benjamin Charais Jun 02 '21 at 02:50
Your welcome. Hope you can save your time! – Ray Coder Jun 07 '21 at 07:54
1

Great hint in general! That makes life a lot easier – stan Sep 02 '21 at 08:56

score 6 · Answer 8 · answered Sep 20 '19 at 08:57

6

Put the Text in a Center:

Container(
      height: 45,
      color: Colors.black,
      child: Center(
        child: Text(
            'test',
            style: TextStyle(color: Colors.white),
        ),
      ),
    );

answered Sep 20 '19 at 08:57

Minghang

61
1
1

score 3 · Answer 9 · answered Jul 31 '19 at 21:21

Text element inside Center of SizedBox work much better way, below Sample code

Widget build(BuildContext context) {
    return RawMaterialButton(
      fillColor: Colors.green,
      splashColor: Colors.greenAccent,
      shape: new CircleBorder(),
      child: Padding(
        padding: EdgeInsets.all(10.0),
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            SizedBox(
              width: 100.0,
              height: 100.0,
              child: Center(
                child: Text(
                widget.buttonText,
                maxLines: 1,
                style: TextStyle(color: Colors.white)
              ),
              )
          )]
        ),
    ),
  onPressed: widget.onPressed
);
}

Enjoy coding ‍

score 3 · Answer 10 · answered Jul 27 '20 at 20:44

Overview: I used the Flex widget to center text on my page using the MainAxisAlignment.center along the horizontal axis. I use the container padding to create a margin space around my text.

  Flex(
            direction: Axis.horizontal,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
                Container(
                    padding: EdgeInsets.all(20),
                    child:
                        Text("No Records found", style: NoRecordFoundStyle))
  ])

score 1 · Answer 11 · answered Jul 21 '22 at 09:14

1

you have to set your Text widget property to set textAlign.center.

center(
   child : Text(
  'Hello',
   textAlign: TextAlign.center))

answered Jul 21 '22 at 09:14

Nidhi

51
3

score 1 · Answer 12 · answered Nov 21 '22 at 05:31

1

Wrap your Text widget inside the Align widget and add Alignment.center.

Align(
  alignment: Alignment.center,
  child: Text(
    'Some Text',
    style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
  ),
)

answered Nov 21 '22 at 05:31

Fakhriddin Abdullaev

4,169
2
35
37

score -2 · Answer 13 · edited Dec 29 '20 at 22:33

maybe u want to provide the same width and height for 2 container

Container(
            width: size.width * 0.30, height: size.height * 0.4,
            alignment: Alignment.center,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(6)
            ),
            child: Center(
              child: Text(categoryName, textAlign: TextAlign.center, style: TextStyle(
                fontWeight: FontWeight.bold,
                fontSize: 17,
                color: Colors.white,
              ),),
            ),

How do I center text vertically and horizontally in Flutter?

13 Answers13

Linked

Related