[Flutter]ボタン(button)の高さ(height)をパーセント(percent)で指定する方法

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

ボタンの高さをパーセントで指定する方法を紹介します。

方法
まとめ
1. 関連

方法

インターフェース, インターネット, プログラム, ブラウザ, Www, グラフィック, フラットなデザイン

ボタンの高さをパーセントで指定するには、「MediaQuery」を使います。

まず、buildメソッド内で「MediaQuery」の変数を用意します。

var _size = MediaQuery.of(context).size;

「MediaQuery.of(context).size」で、画面のサイズを変数に格納できます。

そして、ボタンの高さは、用意した変数の「height」プロパティに、「〇〇％」の数値を１００で割った値を掛けて指定します。

例えば、「７０％」ならば「0.7」、「５５％」ならば「0.55」のようになります。

以下は、実際の使用例です。

child: Column(
  mainAxisSize: MainAxisSize.min,
  children: [
    ElevatedButton(
      onPressed: () {},
      child: Text('Button'),
      style: ElevatedButton.styleFrom(
        fixedSize: Size(
          250,
          _size.height * 0.5, //50%
        ),
      ),
    ),
    SizedBox(
      height: 10,
    ),
    ElevatedButton(
      onPressed: () {},
      child: Text('Button'),
      style: ElevatedButton.styleFrom(
        fixedSize: Size(
          250,
          _size.height * 0.2,//20%
        ),
      ),
    ),
    SizedBox(
      height: 10,
    ),
    ElevatedButton(
      onPressed: () {},
      child: Text('Button'),
      style: ElevatedButton.styleFrom(
        fixedSize: Size(
          250,
          _size.height * 0.1, //10%
        ),
      ),
    ),
  ],
),