3 Ways to Center a Text in Flutter with Code + Image (2023)

Flutter lets you mix and match widgets to create a user interface that matches your design. You may need to include a Text within a Column. Sometimes, when you add a Text widget it shows on the left side of the Column. Now, what if you want to bring the Text widget to the Center? In this tutorial, we’ll learn the 3ways to center a text in Flutter.

Here’ what we’ll cover:

• The Problem
• Center a Text using SizedBox Widget
• Center a Text in Flutter using Center Widget
• Using Align widget to Center a Text

The Problem

You may add a Text widget with some other widgets within a Column and you may get an impression of the Text widget being added on the left side. but that’s not true. This happens because the whole column is put on the left-hand side and there are no other widgets that take up the full width of the screen. Otherwise, the Column widget would have shown the Text in the Center. 

Example Code:

Column(
  children: const [
    SizedBox(
      height: 50,
    ),
    Text(
      'Lorem Ipsum',
      style: TextStyle(fontSize: 35, fontWeight: FontWeight.bold),
    ),
  ],
)

Output:

Center a Text using SizedBox Widget

The SizedBox widget allows you to create a widget of fixed height and width. The idea is to create an empty SizedBox and set the width to infinite. This will make the column take all the available space in the cross axis and hence the Text widget will appear in the center.

To center a Text using the SizedBox widget:

Step 1: Add the SizedBox widget inside the Column

Step 2: Set the width parameter to double.infinity and height to the appropriate value.

Step 3: Run the app.

Example Code:

Column(
  children: const [
    SizedBox(
      width: double.infinity,
      height: 50,
    ),
    Text(
      'Lorem Ipsum',
      style: TextStyle(fontSize: 35, fontWeight: FontWeight.bold),
    ),
  ],
)

Output:

Center a Text in Flutter using Center Widget

The Center widget in Flutter is a convenient widget to bring any widget into the center. The Center widget first takes all the available space (as long as its parent allows) and then puts the child widget in the center both vertically and horizontally.

To center a Text widget using the Center widget:

Step 1: Simply, wrap your Text widget inside the Center widget.

Step 2: Run the app.

Example Code:

Column(
  children: const [
    SizedBox(
      height: 50,
    ),
    Center(
      child: Text(
        'Lorem Ipsum',
        style: TextStyle(fontSize: 35, fontWeight: FontWeight.bold),
      ),
    ),
  ],
)

Output:

If you’re interested in further enhancing your text formatting skills in Flutter, be sure to also check out our post on ‘How to Wrap Text on Overflow‘ – it’s packed with useful tips and techniques to take your Flutter development to the next level!

Using Align widget to Center a Text

The Align widget aligns its child within itself. Get the Text widget inside the Align widget and then set the alignment property to Alignment.center to bring Text in the center.

To center a Text using Align widget:

Step 1: Wrap your Text widget inside the Align widget.

Step 2: Add the alignment parameter (inside Align) and assign the Alignment.center.

Step 3: Run the app.

Example Code:

Column(
  children: const [
    SizedBox(
      height: 50,
    ),
    Align(
      alignment: Alignment.center,
      child: Text(
        'Lorem Ipsum',
        style: TextStyle(fontSize: 35, fontWeight: FontWeight.bold),
      ),
    ),
  ],
)

Output:

That’s it. Thanks!

Conclusion

In this tutorial, we learned the 3 ways to center a text in Flutter with practical examples. We learned the various widgets such as SizedBox, Center, and Align widgets and also explored how we can use them to bring the text in the center both horizontally as well as vertically.

Would you like to check other interesting Flutter tutorials?