[Flutter]Containerのサイズを親ウェジェットとの比率で設定するには？

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

Containerのサイズを親ウェジェットのサイズとの比率で設定する方法を紹介します。

方法

まず、Containerを「FractionallySized」の「child」に指定します。

FractionallySizedBox(
  child: Container(
    color: Colors.blue,
  ),
),

そして、FractionallySizedBoxの引数「widthFactor」に横幅の比率、引数「hegihtFactor」に高さの比率を指定します。

比率は、〇〇％を１００で割った値を指定します。

FractionallySizedBox(
  widthFactor: /*横幅の比率*/ 
  heightFactor: /*高さの比率*/,
  child: Container(),
),

これでContainerのサイズを親ウェジェットのサイズとの比率で設定することが出来ます。

使用例

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SizedBox(
          width: 400,
          height: 400,
          child: FractionallySizedBox(
            widthFactor: 0.6, //0.6倍
            heightFactor: 0.85, //0.85倍
            child: Container(
              color: Colors.blue,
            ),
          ),
        ),
      ),
    );
  }