[Flutter]Rowのサイズ(size)を親ウェジェット(parent widget)との比率(percentage)で設定するには？

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

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

方法
使用例

方法

Rowのサイズを親ウェジェットとの比率で設定するには、FractionallySizedBoxを使います。

まず、RowをFractionallySizedBoxでラップします。

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

FractionallySizedBox(
  heightFactor: /*高さの比率*/,
  widthFactor: /*横幅の比率*/,
  child: Row(
    children: [
      ・・・
    ],
  ),
),

FractionallySizedBoxを使えば、Rowのサイズを親ウェジェットとの比率で設定することが出来ます。

使用例

以下は、使用例です。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SizedBox(
          width: 300,
          height: 300,
          child: FractionallySizedBox(
            heightFactor: 0.65, //高さは65%
            widthFactor: 0.4, //横幅は40%
            child: Row(
              children: [
                Expanded(
                  child: Container(
                    color: Colors.blue,
                  ),
                ),
                Expanded(
                  child: Container(
                    color: Colors.yellow,
                  ),
                ),
                Expanded(
                  child: Container(
                    color: Colors.pink,
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }