📱

[Flutter] テキストを揃えたいときの方法3選

2022/02/27に公開

Flutterでテキストを左揃え・中央揃え・右揃えにしたいとき、なかなか思ったようにならないことありませんか?
使っているウィジェットによっても言うことを聞くときと聞かないときがあるんですよね...。

いくつか方法があるので、いずれか試してみましょう。

1.TextAlign in Text()

Text(
  "text", 
  textAlign: TextAlign.left //任意のプロパティ
)

最もシンプル。これで解決するならそれがいい。

2.Align()

Align(
  alignment: Alignment.centerLeft, //任意のプロパティ
  child: Text(...)
)

Text()をAlign()で囲うパターン。

3.Container()

child: Container(
  alignment: Alignment.centerLeft, //任意のプロパティ
  width: double.infinity,
  child: Text(...)
)

Text()をContainer()で囲うパターン。
alignment以外に width: double.infinity を設定したほうがいい場合もある。(これを設定するとコンテンツの横幅限界値をスマホ幅に合わせられる)

これら一つだけで解決できる場合もあれば複数組み合わせで解決する場合もあるので、お試しください!

Discussion