FlutterでStackとPositionedを使って親要素からはみ出すウィジェットを作る

はじめに

Flutterのレイアウトシステムは非常に強力です。この記事ではStackとPositionedウィジェットを使って、親の要素からはみ出してウィジェットを配置する方法を、実際の例を交えて詳しく解説します。

StackとPositionedの基本

まず、Stackウィジェットについて簡単に説明します。Stackは子ウィジェットを重ねて表示するためのウィジェットです。子ウィジェットはデフォルトでは左上の角に配置されますが、Positionedウィジェットを使用することで、任意の位置に配置することができます。

Stack(
  children: <Widget>[
    Positioned(
      top: 20,
      left: 20,
      child: Text('Hello, World!'),
    ),
  ],
)

親要素からはみ出す配置

Stackの中でPositionedを使ってウィジェットを配置する場合、通常は親ウィジェットの範囲内に収めますが、意図的に親の範囲を超えさせることも可能です。以下の例は、親ウィジェットの境界から25ピクセルはみ出して、子ウィジェットを配置しています。

Stack(
  clipBehavior: Clip.none, // 親の範囲外に子ウィジェットを描画するために必要
  children: <Widget>[
    Container(
      decoration: const BoxDecoration(color: Colors.red),
      width: 300,
      height: 300,
    ),
    //左側にはみ出る要素
    Positioned(
      top: 0,
      left: -25,
      child: Container(
        width: 50,
        height: 50,
        color: Colors.blue,
      ),
    ),
    //右上にはみ出る要素
    Positioned(
      top: -25,
      right: -25,
      child: Container(
        width: 50,
        height: 50,
        color: Colors.blue,
      ),
    ),
  ],
)

＜実行結果＞

clipBehaviorを設定するのがポイント

親の要素からはみ出してウィジェットを配置する際は、clipBehaviorプロパティをClip.noneに設定すします。これにより、Stackが子ウィジェットをクリップしないようになり、意図したデザインが実現できます。clipBehaviorプロパティを設定しないと、はみ出た部分が見切れた状態になります。

まとめ

StackとPositionedを使うことで、Flutterでのウィジェットの配置は非常に柔軟に行うことができます。