どうも、ちょげ(@chogetarou)です。
Column内のテキストを中央に表示する方法を紹介します。
方法
Column内のテキストを中央に表示するに方法は２つあります。
style
１つ目は、Textの引数「style」を使う方法です。
まず、Textの引数「style」にTextStyleを指定します。
そして、TextStyleの引数「textAlign」にTextAlign.centerを指定します。
Text(
'テキスト',
textAlign: TextAlign.center,
),crossAxisAlignment
２つ目は、crossAxisAlignmentを使う方法です。
具体的には、Columnの引数「crossAxisAlignment」にCrossAxisAlignment.centerを指定します。
SizedBox(
width: double.infinity,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text('Item 1'),
Text('Item 2'),
Text('Item 3'),
],
),
),注意点としては、crossAxisAlignment.centerを機能させるには、Columnの横幅を指定する必要があります。
横幅を指定しなければ、常に左に表示されます。
Container
３つ目は、Containerを使う方法です。
まず、TextをContainerでラップします。
そして、Containerの引数「alignment」にAlignment.centerを指定します。
Container(
child: Text('テキスト'),
alignment: Alignment.center,
height : /*高さ*/
),まとめ
Column内のテキストを中央に表示する方法は次の３つです。
- Textの引数「style」を使う方法
- crossAxisAlignmentを使う方法
- Containerを使う方法
コメント