【 Spacer 】隙間を埋めるWidgetを使おう！【 Flutter 】

「レイアウトを上手く調整したい！」

本記事ではそんな要望にお答えします。

レイアウトの隙間を埋めて上手く調整するのに有用なウィジェットである、
Spacerウィジェットについて解説します。

基本的な使い方から、調整方法まで詳しく解説します。

ぜひ読んでみてください！

基本的な使い方

Column やRow にSpacer ウィジェットを配置することで、
子と画面の隙間を埋めるようにスペースが設定されます。

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          children: [
            const Spacer(),
            Container(
              width: 200,
              height: 200,
              color: Colors.red,
            ),
          ],
        ),
      ),
    );
  }
}

Rowでも同様に子と画面の差分の隙間をSpacerが埋めます。

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Row(
          children: [
            const Spacer(),
            Container(
              width: 200,
              height: 200,
              color: Colors.red,
            ),
          ],
        ),
      ),
    );
  }
}

Spacerを2つ配置すると、1つのSpacerの大きさは、
子と画面の間の隙間を2等分した大きさになります。

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Row(
          children: [
            const Spacer(),
            const Spacer(),
            Container(
              width: 200,
              height: 200,
              color: Colors.red,
            ),
          ],
        ),
      ),
    );
  }
}

これを利用することで、この両端に同じ大きさのスペースをSpacerで設定することができます。

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Row(
          children: [
            const Spacer(),
            Container(
              width: 200,
              height: 200,
              color: Colors.red,
            ),
            const Spacer(),
          ],
        ),
      ),
    );
  }
}

基本的な使い方は以上となります！

調整方法

flexプロパティにて数値を設定することで、
Spacerを含むExpandedされたウィジェットがRow(Column)の中に複数ある際に、
どれだけの大きさをSpacerが占有するかを設定することができます。

以下は、２つあるSpacerの片方にflex : 2を設定した例です。
何も設定しない場合 flex : 1のため、
結果として隙間を1:2に分けていることがわかります。

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Row(
          children: [
            const Spacer(),
            Container(
              width: 200,
              height: 200,
              color: Colors.red,
            ),
            const Spacer(
              flex: 2,
            ),
          ],
        ),
      ),
    );
  }
}

調整方法は以上となります！

まとめ

本記事では、レイアウトの隙間を埋めて上手く調整するのに有用なウィジェットである、
Spacerウィジェットについて解説しました。

基本的な使い方から、調整方法まで詳しく解説しました。

いかがだったでしょうか？

画面の隙間を数値で設定するのでなく、隙間の大きさに応じて設定したい、
という時に有用なウィジェットかと思います。

ぜひ利用して、自由自在にレイアウトを作成してみてください！

本記事があなたのアプリ開発の一助となれば幸いです。

編集後記（2022/11/18）