[Flutter]Containerのサイズ(size)を親ウェジェット(parent widget)の半分(half)にするには？

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

Cotainerのサイズを親ウェジェットの半分にする方法を紹介します。

方法

Containerウェジェットのサイズを親となるウェジェットの半分にするには、まずContainerをFractionallySizedBoxのchildに指定します。

そして、FractionSizedBoxの引数「widthFactor」と引数「heghtFactor」に「0.5」を指定します。

FractionallySizedBox(
  widthFactor: 0.5, //横幅を半分に
  heightFactor: 0.5, //高さを半分に
  child: Container(),
),

これでコンテナのサイズが親ウェジェットの半分になります。

使用例

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          color: Colors.blue,
          height: 200,
          width: 200,
          child: FractionallySizedBox(
            widthFactor: 0.5,
            heightFactor: 0.5,
            child: Container(
              color: Colors.pink,
            ),
          ),
        ),
      ),
    );
  }