Spacer
使い方
- 基本形
- 例
  - Spacerが1つのケース
  - Spacerが2つ以上のケース

Spacer

サイズを指定できるスペースを作成するウィジェット。 RowやColumnなどのFlex系ウィジェットの子ウィジェットとして使用する。

スペースはFlex系ウィジェットのmain axis方向に作成される。（Column：垂直方向、Row：水平方向）

api.flutter.dev

使い方

基本形

Column内で使用する場合。

Column(
  children: [
    ... ,
    Spacer(flex: ... /* スペースの割合 */),
    ...
  ],
),

これで可能な限りのスペースが挿入される。

以降で例を示しながら説明する。

例

Spacerが1つのケース

Spacer()記入前の状態は以下とする。

Container(
  padding: const EdgeInsets.all(100.0),
  child: Column(
    children: [
      Container(
        height: 50,
        color: Colors.red,
      ),
      Container(
        height: 50,
        color: Colors.blue,
      ),
    ],
  ),
);

Column内にSpacerを記入すると表示は次のようになる。

Container(
  padding: const EdgeInsets.all(100.0),
  child: Column(
    children: [
      Container(
        height: 50,
        color: Colors.red,
      ),
      Spacer(),
      Container(
        height: 50,
        color: Colors.blue,
      ),
    ],
  ),
);

Spacerが2つ以上のケース

Spacer()記入前の状態は以下とする。

Container(
      padding: const EdgeInsets.all(100.0),
      child: Column(
        children: [
          Container(
            height: 50,
            color: Colors.red,
          ),
          Container(
            height: 50,
            color: Colors.blue,
          ),
          Container(
            height: 50,
            color: Colors.green,
          ),
        ],
      ),
    );

Column内にSpacerを記入すると表示は次のようになる。

Container(
  padding: const EdgeInsets.all(100.0),
  child: Column(
    children: [
      Container(
        height: 50,
        color: Colors.red,
      ),
      Spacer(
        flex: 1 /* */,
      ),
      Container(
        height: 50,
        color: Colors.blue,
      ),
      Spacer(
        flex: 3,
      ),
      Container(
        height: 50,
        color: Colors.green,
      ),
    ],
  ),
);