【Flutter】Flexible|画面外にはみ出るコンテンツを画面内部に留める

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

Flexible を使えばColumnRow から画面外にはみ出てしまう可能性があるコンテンツを画面内に留めることができます。

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

目次

Flexibleの使い方

Column(
  children: [
    Container(
      height: 500,
      color: Colors.red,
    ),
    Flexible(
      child: Container(
        height: 500,
        color: Colors.blue,
      ),
    ),
  ],
),

Flexible でラップしたWidget(コンテンツ)が画面外にはみ出てしまう場合、Widgetが領域内に留まるようサイズを調整します。

Flexibleあり

Flexibleなし

複数ある場合は「flex」で範囲調整

Column(
  children: [
    Container(
      height: 400,
      color: Colors.red,
    ),
    Flexible(
      flex: 2,
      child: Container(
        height: 400,
        color: Colors.blue,
      ),
    ),
    Flexible(
      child: Container(
        height: 400,
        color: Colors.yellow,
      ),
    ),
  ],
),

複数のFlexibleColumnRow の要素として存在している場合、flex で広がる範囲の割合を指定できます。

デフォルトではflex: 1 です。

一緒に読みたい

参考

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