【Flutter】Positioned|Stackの要素の配置・サイズを調整

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

Positionedを使えばStackで表示されている任意の要素の配置・サイズを調整できます。

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

目次

Positionedの使い方

Stack(
  children: [
    Container(
      width: 200,
      height: 200,
      color: Colors.blue,
    ),
    Positioned(
      bottom: 0,
      right: 0,
      child: Container(
        width: 100,
        height: 100,
        color: Colors.red,
      ),
    )
  ],
),

Stackchildrenから配置またはサイズを調整したい要素をPositionedでラップします。

配置はtop bottom right leftで指定できます。

Positionedあり

Positionedなし

height, widthでサイズ調整

Stack(
  children: [
    Container(
      width: 200,
      height: 200,
      color: Colors.blue,
    ),
    Positioned(
      width: 150,
      height: 150,
      child: Container(
        width: 100, //無視
        height: 100, //無視
        color: Colors.red,
      ),
    )
  ],
),

Positionedで子要素の高さ、横幅をそれぞれheight widthで指定できます。

topとbottomでサイズ調整

Stack(
  children: [
    Container(
      width: 200,
      height: 200,
      color: Colors.blue,
    ),
    Positioned(
      top: 0,
      bottom: 0,
      child: Container(
        width: 100, //無視
        height: 100, //無視
        color: Colors.red,
      ),
    )
  ],
),

Positionedでラップした子要素の高さはheightを使わず、topbottomの両方を使用して指定することもできます。

widthの場合は right leftで指定します。

top: 0, bottom: 0

left: 0, right: 0

親要素のサイズと同じにする

Stack(
  children: [
    Container(
      width: 200,
      height: 200,
      color: Colors.blue,
    ),
    Positioned.fill(
      child: Container(
        width: 100, //無視
        height: 100, //無視
        color: Colors.red,
      ),
    )
  ],
),

Positioned.fillで親要素のサイズと同じにできます。

top: 0 bottom: 0 right: 0 left: 0になります。

一緒に読みたい

参考

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