🫵

Spacerとは？

2023/08/13に公開

🇺🇸公式を翻訳

Spacerは調整可能な空のスペーサーを作成し、RowやColumnのようなFlexコンテナ内のウィジェット間の間隔を調整するために使用できます。

スペーサーウィジェットは利用可能なスペースをすべて占有するので、スペーサーを含むフレックスコンテナの Flex.mainAxisAlignment を MainAxisAlignment.spaceAround、 MainAxisAlignment.spaceBetween、 MainAxisAlignment.spaceEvenly に設定しても目に見える効果はありません。

🔨作ってみたコード

Spacerを使用して、丸の図形の間の空白を調整してみたコード。flexパラメーターを使い数値を指定して、中央寄せにしたら、位置をずらすことができるので、自分がおきたい場所に、オブジェクトを配置することができそうです。

import 'package:flutter/material.dart';

class ClipRectObject extends StatelessWidget {
  const ClipRectObject({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: const Text("Widget")),
        body: Column(
          children: [
            Row(
              children: [
                CircleObject(color: Colors.red, width: 50, height: 50),
                Spacer(), // Spacerは、子Widgetの間にスペースを入れる
                // この場合だと、丸のコンテナが右端に寄る
                CircleObject(color: Colors.blue, width: 100, height: 100),
                CircleObject(color: Colors.green, width: 80, height: 100),
              ],
            ),
            Row(
              children: [
                CircleObject(color: Colors.red, width: 50, height: 50),
                Spacer(flex: 2), // Spacerは、子Widgetの間にスペースを入れる
                // Spacerのflexを2にすると、丸のコンテナが中央に寄る
                CircleObject(color: Colors.blue, width: 100, height: 100),
                Spacer(),
                CircleObject(color: Colors.green, width: 80, height: 100),
              ],
            ),
            Row(
              children: [
                CircleObject(color: Colors.red, width: 50, height: 50),
                // Spacerのflexを4にすると、中央から右側に寄る
                Spacer(flex: 6),
                // Spacerのflexを2にすると、丸のコンテナが中央に寄る
                CircleObject(color: Colors.blue, width: 100, height: 100),
                Spacer(),
                CircleObject(color: Colors.green, width: 80, height: 100),
              ],
            ),
          ],
        ));
  }
}

// 丸のオブジェクトをコンポーネント化
class CircleObject extends StatelessWidget {
  const CircleObject({
    super.key,
    required this.color,
    required this.width,
    required this.height,
  });

  final double width;
  final double height;
  final Color color;

  @override
  Widget build(BuildContext context) {
    return ClipRRect(
      borderRadius:
          BorderRadius.circular(1000), // borderRadiusは、ClipRRectの子Widgetの角を丸める
      // 横と縦の幅が300pxの丸のコンテナを作る
      child: Container(
        width: width,
        height: height,
        color: color,
      ),
    );
  }
}

まとめ

Spacerは使ったことなかったので、使ってみた感想ですが、空白を埋めてくれるので、今後は活用していきたいと思っています。いつもSizedBoxでやっていたので、いい感じのレイアウトにできなかったです😅

フレックス・ファクターは、スペースの広さを決める際に使用する。

スペーサーが主軸で占有できるスペースの量は、フレキシブルチルドレンのフレックスファクターに従って、フレキシブルチルドレンを配置した後のフリースペースを比例配分することによって決定されます。

デフォルトは1です。

使用例

Spacer(flex: 2),

Spacerとは？

Widget同士の間隔を調整してくれる

🇺🇸公式を翻訳

🔨作ってみたコード

まとめ

Discussion