【Flutter】Positionedの使い方｜Stackの要素の配置・サイズを調整

2023年2月24日

Flutterのウィジェット「Positioned」の使い方を紹介します。

「Positioned」は「Stack」で配置するウィジェットの配置やサイズを調整する際に使用されます。

Positionedの使い方

「Positioned」は「Stack」の要素で位置やサイズを調整したいウィジェットをラップして使用します。

「Positioned」でラップした要素で指定した高さと横幅は反映されず、「Positioned」で指定した配置（サイズ）で要素が配置されます。

下記コードでは「Container」で指定した「width」と「height」は反映されません。

Stack(
  children: [
    Positioned(
      left: 20,
      top: 40,
      right: 60,
      bottom: 80,
      child: Container(
        color: Colors.amber,
        width: 1,
        height: 1,
      ),
    ),
  ],
),

高さ・横幅を指定して配置

「Positioned」では下記コードのように「width」、「height」を使用してサイズを調整できます。

Stack(
  children: [
    Positioned(
      left: 20,
      top: 40,
      width: 100,
      height: 100,
      child: Container(
        color: Colors.amber,
        width: 1,
        height: 1,
      ),
    ),
  ],
),

Positioned.directionalの使い方

「Positioned.directional」は基本的に「Positioned」と使い方は同じです。

異なるのは水平方向におけるスタート地点で「textDirection」によってスタート地点を指定できます。「textDirection」に「TextDirection.ltr」を渡せば左から右、「TextDirection.rtl」を渡せば右から左のスタート地点となります。

下記コードでは「TextDirection.rtl」と指定しているので、右側の位置を「start」、左側の位置を「end」で指定します。

child: Stack(
  children: [
    Positioned.directional(
      textDirection: TextDirection.rtl,
      start: 20,
      top: 40,
      end: 60,
      bottom: 80,
      child: Container(
        color: Colors.amber,
      ),
    ),
  ],
),

Positioned.fillの使い方

「Positioned.fill」は要素を最大限いっぱいに広げたい場合に使用します。

「Positioned.fill」では「left」、「top」、「right」、「bottom」の値がデフォルトで「0.0」です。

Stack(
  children: [
    Positioned.fill(
      child: Container(
        color: Colors.amber,
      ),
    ),
  ],
),

サンプルコード

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Flutter')),
        body: Center(
          child: Container(
            width: 300,
            height: 300,
            color: Colors.lightBlue,
            child: Stack(
              children: [
                Positioned(
                  left: 20,
                  top: 40,
                  right: 60,
                  bottom: 80,
                  child: Container(
                    color: Colors.amber,
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

以上です。