[Flutter]ボタンのサイズをパーセントで指定する方法

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

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

方法

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

まず、buildメソッド内で、「MediaQuery」を使って画面のサイズを取得します。

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

「MediaQuery.of(context).size」で、画面のサイズが取得することが出来ます。

次に、「MediaQuery.of(context).size」の「width」プロパティで幅、「height」プロパティで高さを取得します。

_size.width //幅
_size.height //高さ

最後に、「〇〇％」の数値を１００で割った値を、幅もしくは高さに掛けて、ボタンのサイズに指定します。

以下は、ElevatedButtonを使った例です。

ElevatedButton(
  onPressed: () {},
  child: Text('Button'),
  style: ElevatedButton.styleFrom(
    fixedSize: Size(
      _size.width * 0.95, //95%
      _size.height * 0.15, //15%
    ),
  ),
),

まとめ

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

「MediaQuery.of(context).size」で画面のサイズを取得し、そのプロパティに割合を掛けます。

その値を、ボタンのサイズに指定します。