3 Ways to Align Text in Flutter

Seito Horiguchi
1 min readFeb 26, 2022

--

When you want to left-center, center, or right-align text in Flutter, do you ever have trouble getting it to work the way you want?
Depending on the widget you are using, it may or may not work the way you want it to….

There are several ways to do this, so let’s try one of them.

1. TextAlign in Text()

Text(
“text”,
textAlign: TextAlign.left //Optional property
)

This is the simplest approach. If this solves the problem, that’s best.

2. Align ()

Align(
alignment: Alignment.centerLeft, //optional property
child: Text(…)
)

This is an approach for enclosing Text() with Align().

3.Container ()

child: Container(
alignment: Alignment.centerLeft, //optional property
width: double.infinity,
child: Text(…)
)

This is an approach to surround Text() with Container().
In some cases, it is better to set `width: double.infinity` in addition to alignment. (If you set this, you can adjust the width limit of the content to the width of your phone.)

Some cases can be solved with just one of these, others with a combination of them, so give it a try!

--

--

Seito Horiguchi

Hi, I'm a Web developer and Tech YouTuber ;) I mainly code JS, TS, and Python. https://www.linkedin.com/in/seito/