[Flutter]ElevatedButtonの横幅を設定するには？

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

ElevatedButtonの横幅を設定する方法を紹介します。

方法

ElevatedButtonの横幅を設定する方法は３つあります。

ElevatedButton.styleFrom

１つ目は、ElevatedButton.styleFromを使う方法です。

ElevatedButton(
  onPressed: () {},
  child: Text('Button'),
  style: ElevatedButton.styleFrom(
    fixedSize: Size.fromWidth(200),//Sizeを使って横幅を設定
  ),
),

ElevatedButtonの引数「fixedSize」によって、横幅を設定することが出来ます。

Container

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

まず、ElevatedButtonをContainerの「child」に指定します。

そして、Containerの引数「width」に横幅を指定します。

Container(
  width: 100, //横幅
  child: ElevatedButton(
    onPressed: () {},
    child: Text('Button'),
  ),
),

ConstrainedBox

３つ目は、ConstrainedBoxを使う方法です。

まず、ConstrainedBoxの引数「child」に、ElevatedButtonを指定します。

そして、ConstrainedBoxの引数「constraints」で、横幅の設定をします。

ConstrainedBox(
  constraints: BoxConstraints(
    minWidth: 150, //横幅の設定
  ),
  child: ElevatedButton(
    onPressed: () {},
    child: Text('Button'),
  ),
),

まとめ

ElevatedButtonの横幅は、次の３つの方法を使って設定することが出来ます。

• ElevatedButton.styleFrom
• Container
• ConstrainedBox