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:

jeroen-meijer · Accepted Answer · 2020-01-05 01:14:34Z

573

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 5, 2020 at 1:14

jeroen-meijer

3,0242 gold badges15 silver badges17 bronze badges

answered Nov 21, 2018 at 7:21

Shelly Pritchard

11.7k4 gold badges21 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sanjeev Sangral Over a year ago

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

jeroen-meijer Over a year ago

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

Victor Kwok Over a year ago

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.

nbro · Accepted Answer · 2018-09-09 17:16:59Z

119

You can use TextAlign property of Text constructor.

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

edited Sep 9, 2018 at 17:16

nbro

16.1k34 gold badges122 silver badges219 bronze badges

answered May 27, 2018 at 16:22

Tree

31.7k28 gold badges85 silver badges100 bronze badges

2 Comments

Herohtar Over a year ago

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.

Hasen Over a year ago

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

Mike · Accepted Answer · 2019-06-05 06:12:11Z

98

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 5, 2019 at 6:12

Mike

1,5011 gold badge18 silver badges25 bronze badges

4 Comments

Nikola Jovic Over a year ago

Much better answer is this one.

kokoko Over a year ago

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

RegularGuy Over a year ago

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

dan-gph Over a year ago

You may need to set TextStyle( leadingDistribution: TextLeadingDistribution.even) too for large fonts to get them centered properly vertically.

Andreas Violaris · Accepted Answer · 2023-03-13 10:33:54Z

24

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.

edited Mar 13, 2023 at 10:33

Andreas Violaris

4,5446 gold badges22 silver badges38 bronze badges

answered Nov 12, 2019 at 14:24

Paul Kitatta

5091 gold badge7 silver badges13 bronze badges

Comments

General Grievance · Accepted Answer · 2023-09-13 14:06:31Z

18

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

edited Sep 13, 2023 at 14:06

General Grievance

5,12039 gold badges40 silver badges60 bronze badges

answered Jan 20, 2022 at 10:58

Samuel Quiroz

3713 silver badges6 bronze badges

1 Comment

jeroen-meijer Over a year ago

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

Saad · Accepted Answer · 2023-03-07 07:47:01Z

13

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 7, 2023 at 7:47

Saad

6355 silver badges20 bronze badges

answered Sep 14, 2021 at 9:10

Kasujja Muhammed

5026 silver badges12 bronze badges

Comments

Ray · Accepted Answer · 2020-10-24 09:09:44Z

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, 2020 at 9:09

Ray

4145 silver badges11 bronze badges

answered Jun 25, 2020 at 6:57

Ray Coder

1,1114 gold badges15 silver badges36 bronze badges

Comments

Minghang · Accepted Answer · 2019-09-20 08:57:45Z

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, 2019 at 8:57

Minghang

611 silver badge1 bronze badge

Comments

ListenSoftware Louise Ai Agent · Accepted Answer · 2020-07-27 20:44:28Z

3

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

answered Jul 27, 2020 at 20:44

ListenSoftware Louise Ai Agent

4,3432 gold badges31 silver badges39 bronze badges

Comments

General Grievance · Accepted Answer · 2023-09-13 14:08:19Z

3

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

edited Sep 13, 2023 at 14:08

General Grievance

5,12039 gold badges40 silver badges60 bronze badges

answered Jul 31, 2019 at 21:21

Ramesh R C

6727 silver badges18 bronze badges

Comments

Nidhi · Accepted Answer · 2022-07-21 09:14:46Z

2

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

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

answered Jul 21, 2022 at 9:14

Nidhi

613 bronze badges

1 Comment

AzeTech Over a year ago

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

Fakhriddin Abdullaev · Accepted Answer · 2022-11-21 05:31:53Z

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, 2022 at 5:31

Fakhriddin Abdullaev

4,9902 gold badges44 silver badges42 bronze badges

Comments

Joe Ferndz · Accepted Answer · 2020-12-29 22:33:31Z

-2

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

edited Dec 29, 2020 at 22:33

Joe Ferndz

8,5282 gold badges15 silver badges37 bronze badges

answered Dec 29, 2020 at 17:58

someone_that_needHelp

1655 silver badges19 bronze badges

Collectives™ on Stack Overflow

How do I center text vertically and horizontally in Flutter?

13 Answers 13

3 Comments

2 Comments

4 Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

13 Answers 13

3 Comments

2 Comments

4 Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related