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  quot test quot    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

User · Answer

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 ?

User · Answer

child  Align                            alignment  Alignment center                            child  Text                               Text here                               textAlign  TextAlign center                                                                                      This produced the best result for me

User · Answer

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

User · Answer

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

User · Answer

Put the Text in a Center   Container        height  45        color  Colors black        child  Center          child  Text               test               style  TextStyle color  Colors white

User · Answer

You can use TextAlign property of Text constructor   Text  text   textAlign  TextAlign center

User · Answer

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  quot No Records found quot   style  NoRecordFoundStyle

User · Answer

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

User · Answer

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

[user-interface] How do I center text vertically and horizontally in Flutter?

Examples related to user-interface

Examples related to text

Examples related to widget

Examples related to alignment

Examples related to flutter