Dart / FlutterでTextを右寄せ、最後の一つだけ右寄せする方法

2021年11月30日Dart / FlutterでTextFieldを右寄せする方法

Columnの中で右寄せをする

Columnは縦並びなので左右はクロスの軸なので、
crossAxisAlignmentのendが右

Column(
  crossAxisAlignment: CrossAxisAlignment.end,
  children: [
    Text('右寄せ'),
  ]
)

Rowの中で右寄せをする

Rowは横並びなので左右はメインの軸なので、
mainAxisAlignmentのendが右

Row(
  mainAxisAlignment: MainAxisAlignment.end,
    children: [
    Text('右寄せ'),
  ]
)

一部だけ右寄せにしたい場合

Alignというのが、用意されているContainerで良いんですけどね。。

Align(
  child: Text('右寄せ'),
  alignment: Alignment.centerRight,
)

左寄せについて

左寄せしたい場合はstartやcenterLeftにするとできます。

最後の一つだけ右寄せする

ポイントはExpandedです。
Expanded余っているところを最大まで広げて使うウィジェットです。

これで、SizedBoxが最大まで広がって、3が一番右に行きます。

Row(
  children: [
    Text('1'),
    Text('2'),
    Expanded(child: SizedBox()),
    Text('3'),
  ],
),

これもできる

Expandedで子要素のContainerが広がります。
その広がった空間の中で右寄せすることで、
最後の一つだけを右寄せにすることができます。

Row(
  children: [
    Text('1'),
    Text('2'),
    Expanded(
      child: Container(
        alignment: Alignment.centerRight,
        child: Text('3'),
      ),
    ),
  ],
),

2021年12月18日Flutter開発で知らないと損すること