フラッター配置

Positioned ウィジェットは、スタックの子ウィジェットを配置するために使用されます。

• フラッタースタック

Positioned は、Stack の直接 (または子孫) の子としてのみ使用できます。スタックへの Positioned パスには、StatelessWidget または StatefulWidget ウィジェットのみが含まれ、他のウィジェット (RenderObjectWidget など) は許可されません。

Positioned のコンストラクターは次のとおりです- 

const Positioned(
    {Key key,
    double left,
    double top,
    double right,
    double bottom,
    double width,
    double height,
    @required Widget child}
)

ダーツ

サンプルコード:

SizedBox (
    width: double.infinity,
    height: double.infinity,
    child: Stack(
      alignment: Alignment.centerLeft,
      children: <Widget>[
        Positioned (
           left: 100,
          top: 70,
          child: Container(
            width: 200,
            height: 100,
            color: Colors.green,
          ),
        )
      ],
    )
)

ダーツ

配置されたオブジェクトとその子オブジェクトは常に同じサイズになります。上記のサンプル コードを実行すると、次の結果が得られます。

別の例を次に示します。null 以外の上部と下部を使用して配置すると、その制約に合わせて子ウィジェットの高さが強制的に変更されます。

サンプルコード:

SizedBox (
    width: double.infinity,
    height: double.infinity,
    child: Stack(
      alignment: Alignment.centerLeft,
      children: <Widget>[
        Positioned (
          top: 100,
          bottom: 70,
          child: Container (
            width: 200,
            height: 30, // !!
            color: Colors.green,
          ),
        )
      ],
    )
)

ダーツ

上記のサンプル コードを実行すると、次の結果が得られます。

left、right、および width パラメータがすべて null の場合、 Stack.alignment このプロパティは子ウィジェットを水平方向に配置するために使用されます。同様に、top、bottom、height の 3 つのパラメータがすべて null の場合、この Stack.alignment プロパティは子ウィジェットを垂直方向に配置するために使用されます。

2. Positioned.方向性コンストラクター

Positioned.directionalコンストラクターは、テキストベースの方向を作成するために使用されます Positioned。

Positioned.方向性コンストラクター

Positioned.directional(
  {Key key,
  @required TextDirection textDirection,
  double start,
  double top,
  double end,
  double bottom,
  double width,
  double height,
  @required Widget child}
)

ダーツ

textDirection パラメータは必須であり、null ではありません。値 TextDirection.ltr (左から右) または TextDirection.rtl (右から左) を受け入れます。
textDirection が TextDirection.ltr の場合、パラメータ (start、end) は (left、right) に対応します。それ以外の場合、(開始、終了) は (右、左) に対応します。

3. Positioned.fill コンストラクター

Positioned.fill は、パラメータの left、right、top、bottom のデフォルト値が 0 であるコンストラクタです。

Positioned.fill コンストラクター

const Positioned.fill(
  {Key key,
  double left: 0.0,
  double top: 0.0,
  double right: 0.0,
  double bottom: 0.0,
  @required Widget child}
)

ダーツ

4. Positioned.fromRect コンストラクター

Positioned.fromRect は、Rect オブジェクトから指定された値を使用して Positioned オブジェクトを作成します。

Positioned.fromRect コンストラクター- 

Positioned.fromRect(
  {Key key,
  Rect rect,
  @required Widget child}
)

ダーツ

5. Positioned.fromRelativeRect コンストラクター

Positioned.fromRelativeRect コンストラクター コードは次のとおりです。 

Positioned.fromRelativeRect(
  {Key key,
  RelativeRect rect,
  @required Widget child}
)

//詳しくはこちらをお読みください: https://www.yiibai.com/flutter/flutter-positioned.html