[Flutter]Containerのサイズを画面サイズとの比率で設定するには？

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

Containerのサイズを画面のサイズとの比率で設定する方法を紹介します。

方法

Containerのサイズを画面のサイズとの比率で設定するには、MediaQueryを使います。

まず、buildメソッド内で「MediaQuery.of(context).size」で画面サイズを取得します。

  @override
  Widget build(BuildContext context) {
    var _screenSize = MediaQuery.of(context).size;
    
    return /*Widget*/;
  }

次にContainerの横幅を設定する引数「width」にMediaQueryの「widthプロパティ」、高さを設定する引数「height」にMediaQueryの「heightプロパティ」を指定します。

Container(
  width: _screenSize.width,
  height: _screenSize.height,
),

そして、widthとheightのそれぞれに設定したい比率を掛けます。

Container(
  width: _screenSize.width * /*比率*/,
  height: _screenSize.height * /*比率*/,
),

半分なら比率は「0.5」、８割なら比率は「0.8」のようになります。

使用例

  @override
  Widget build(BuildContext context) {
    var _screenSize = MediaQuery.of(context).size;

    return Scaffold(
      body: Center(
        child: Container(
          width: _screenSize.width * 0.7, //横幅は６割
          height: _screenSize.height * 0.4, //高さは4割
          color: Colors.blue,
        ),
      ),
    );
  }