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

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

ボタンの幅を全体の画面の幅の割合で指定する方法を紹介します。

方法

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

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

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

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

そして、この変数の「widthプロパティ」を使って、ボタンの幅をパーセントで指定します。

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

Column(
  mainAxisSize: MainAxisSize.min,
  children: [
    ElevatedButton(
      onPressed: () {},
      child: Text('Button'),
      style: ElevatedButton.styleFrom(
        fixedSize: Size(
          _size.width * 0.7, //70%
          50,
        ),
      ),
    ),
    SizedBox(
      height: 20,
    ),
    ElevatedButton(
      onPressed: () {},
      child: Text('Button'),
      style: ElevatedButton.styleFrom(
        fixedSize: Size(
          _size.width * 0.5, //50%
          50,
        ),
      ),
    ),
    SizedBox(
      height: 20,
    ),
    ElevatedButton(
      onPressed: () {},
      child: Text('Button'),
      style: ElevatedButton.styleFrom(
        fixedSize: Size(
          _size.width * 0.25, //25%
          50,
        ),
      ),
    ),
  ],
),

まとめ

MediaQueryを使うことによって、ボタンの幅を画面全体の幅のパーセントで指定することが出来ます。