【Flutter】FractionallySizedBox|Widgetのサイズをパーセントで指定

今回はFractionallySizedBoxの基本的な使い方を紹介します。

FractionallySizedBoxではWidgetのサイズをパーセントで指定できます。

\ 世界最大級のオンライン学習サービス /

目次

FractionallySizedBoxの使い方

Container(
  width: 200,
  height: 200,
  color: Colors.blue,
  child: FractionallySizedBox(
    widthFactor: 0.5,
    heightFactor: 0.5,
    child: Container(
      color: Colors.yellow,
      width: 200, //無視
      height: 200, //無視
    ),
  ),
),

FractionallySizedBoxでラップしたWidgetの高さ、横幅をそれぞれheightFactorwidthFactorで指定します。引数の値にはdouble値を渡します。

親Widgetがheight: 200heightFactor: 0.5とした場合、Widgetの高さはheight: 100になります。

Columnの余白をパーセントで指定

Column(
  children: [
    Container(
      width: 200,
      height: 200,
      color: Colors.blue,
    ),
    Flexible(
      child: FractionallySizedBox(
        heightFactor: 0.5,
      ),
    ),
    Container(
      width: 200,
      height: 200,
      color: Colors.red,
    )
  ],
),

FractionallySizedBoxColumnRowの余白をパーセントで指定できます。

Flexibleの子要素としてFractionallySizedBoxを渡して余白を指定できます。FractionallySizedBoxの子要素はnullとします。

一緒に読みたい

参考

  • URLをコピーしました!
目次