[Flutter]ボタン(Button)を右寄せにする方法

どうも、ちょげ(@chogetarou)です。

ボタンを右寄せにする方法を紹介します。

方法

ボタンを右寄せにする方法は、３つあります。

Align

１つ目は、Alignウェジェットを使う方法です。

Alignウェジェットの「child」に、ボタンを指定します。

そして、引数「alignment」に、「Alignment.toRight」を指定します。

Align(
  alignment: Alignment.topRight, //右寄せの指定
  child: ElevatedButton(
    onPressed: () {},
    child: Text('Button'),
  ),
)

この方法は、１つのボタンだけを右に寄せるのに向いています。

ButtonBar

２つ目は、ButtonBarを使う方法です。

ButtonBarの引数「children」に指定することで、ボタンが右寄せになります。

ButtonBar(
  children: [
    ElevatedButton(
      onPressed: () {},
      child: Text('Button1'),
    ),
    ElevatedButton(
      onPressed: () {},
      child: Text('Button2'),
    ),
    ElevatedButton(
      onPressed: () {},
      child: Text('Button3'),
    ),
  ],
)

「children」にはカンマ区切りで、複数のボタンを右寄せで配置することが出来ます。

Row

３つ目は、Rowウェジェットを使う方法です。

Rowウェジェットの「children」にボタンを指定します。

そして、引数「mainAxisAlignment」に、「MainAxisAlignment.end」を設定します。

Row(
  mainAxisAlignment: MainAxisAlignment.end,
  children: [
    ElevatedButton(
      onPressed: () {},
      child: Text('Button1'),
    ),
    ElevatedButton(
      onPressed: () {},
      child: Text('Button2'),
    ),
    ElevatedButton(
      onPressed: () {},
      child: Text('Button3'),
    ),
  ],
)

「children」には、カンマ区切りで、複数のボタンを配置することが出来ます。

まとめ

次の３つの方法を使うことで、ボタンを右寄せにすることが出来ます。

• Alignを使う方法
• ButtonBarを使う方法
• Rowを使う方法