😎

【Flutter Widget of the Week #26】Positionedを使ってみた

2022/11/24に公開

Flutter

初心者

positioned

tech

はじめに

Flutter Widget of the Week #26 Positioned についてまとめましたので、紹介します。
https://youtu.be/EgtPleVwxBQ

Positioned

今回紹介する Positioned は widget を任意に重ねて配置したい時に効果的な widget です。
通常、子widget を Stack widget などに配置するために使用されます。
では、さっそくサンプルを動かして使い方を見てみましょう。

Positioned サンプルコード

Positioned サンプル実行画面

基本のサンプルコード全体

class PositionedSample extends StatelessWidget {
  const PositionedSample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        padding: const EdgeInsets.all(30),
        margin: const EdgeInsets.only(top: 50),
        child: Stack(
          children: <Widget>[
            Positioned(
              top: 50,
              left: 20,
              height: 250,
              width: 250,
              child: Container(
                width: 150,
                height: 150,
                color: Colors.green[300],
                child: const Text(
                  '緑（一番下）',
                  style: TextStyle(color: Colors.white, fontSize: 20),
                ),
              ),
            ),
            Positioned(
              top: 130,
              left: 50,
              width: 250,
              height: 250,
              child: Container(
                width: 150,
                height: 150,
                color: Colors.red[400],
                child: const Text(
                  '赤（真ん中）',
                  style: TextStyle(color: Colors.white, fontSize: 20),
                ),
              ),
            ),
            Positioned(
              top: 210,
              left: 80,
              width: 250,
              height: 250,
              child: Container(
                width: 80,
                height: 80,
                color: Colors.blue[300],
                child: const Text(
                  '青（一番上）',
                  style: TextStyle(color: Colors.white, fontSize: 20),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

コードを見ての通り、Positioned が複数ある場合、先に書いた widget が下に配置され、後に書いた widget が上に配置されるようになります。

Positioned のプロパティについて

Positioned のプロパティはシンプルです。

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

①left

Stackの左端から子の左端までの距離
型は double 型

②top

Stackの上部から子の上部までの距離
型は double 型

③right

Stackの右端から子の右端までの距離
型は double 型

④bottom

Stackの下部から子の下部までの距離
型は double 型

⑤width

子の幅
型は double 型

⑥height

子の高さ
型は double 型

Positoned には他にも以下のようなコンストラクタがあります。
プロパティが多少変わりますが、基本的な使い方は同じです。

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

(new) Positioned Positioned.fill({
  Key? key,
  double? left = 0.0,
  double? top = 0.0,
  double? right = 0.0,
  double? bottom = 0.0,
  required Widget child,
})

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

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

最後に

今回は Positioned を紹介しました。シンプルに右上や真ん中といった位置に widget を配置したい場合は、前回紹介した Align でも楽に実現できます。しかし、もっと細かく位置を指定したい場合は、Positioned が効果的だと思います。使い方も簡単なので、是非お試しください！
次は #27 AnimatedBuilder です。またお会いしましょう。