Flutter Text Align Center: Top 3 Ways You Must Know

Flutter is a powerful framework that provides the flexibility to create custom user interfaces that match your design vision. However, when building complex UIs, you may find yourself needing to align certain widgets in a specific way. For example, you might want to center a Text widget within a Column. Fortunately, there are several ways to achieve this in Flutter. In this tutorial, we’ll explore three different techniques for Flutter text align center, helping you create beautiful and professional-looking UIs for your mobile apps.

Here’ what we’ll cover:

• The Problem
• Text Align Center using SizedBox Widget
• Text Align Center 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:

Text Align Center 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:

1. Add the SizedBox widget inside the Column
2. Set the width parameter to double.infinity and height to the appropriate value.
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:

Text Align Center 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 align text in flutter using the center widget:

1. Simply, wrap your Text widget inside the Center widget.
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 Text in Flutter using Align widget:

1. Wrap your Text widget inside the Align widget.
2. Add the alignment parameter (inside Align) and assign the Alignment.center.
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 different techniques for Flutter text align center 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?