[Flutter]ElevatedButtonの高さを設定する方法

Flutter

2021.10.19

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

ElevatedButtonの高さを設定する方法を紹介します。

方法

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

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

ElevatedButton(
  onPressed: () {},
  child: Text('Button'),
  style: ElevatedButton.styleFrom(
    fixedSize: Size.fromHeight(70),//高さを設定
  ),
),

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

「fixedSize」ではなく、引数「minimumSize」でも高さを設定することが出来ます。

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

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

そして、Containerの引数「height」で、高さを設定します。

Container(
  height: 80,
  child: ElevatedButton(
    onPressed: () {},
    child: Text('Button'),
  ),
),

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

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

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

ConstrainedBox(
  constraints: BoxConstraints.tightFor(height: 80),
  child: ElevatedButton(
    onPressed: () {},
    child: Text('Button'),
  ),
),

BoxConstraints.tightForの引数「height」で、高さを指定することが出来ます。

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

オススメの記事