SiiD BLOG ロゴ

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

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

この記事を書いた人

SiiD BLOG編集部

SiiD BLOG編集部

SiiD BLOG編集部にて、皆さんの学習やキャリアに役立つ記事を発信します! 普段は受講生の皆さん向けに、学習やキャリアの相談にのったりもしています。

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 を設定したほうがいい場合もある。(これを設定するとコンテンツの横幅限界値をスマホ幅に合わせられる)

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

シェアする

未経験からのエンジニア転職を本気で目指すなら「SiiD」

SiiDはYouTube 13万人のセイト先生が主任講師のAIプログラミングスクール。元人事部長&現役エンジニアによる徹底指導で、生涯年収を大きくアップさせませんか?

SiiDの詳細を見る