[Flutter] UIの間隔をあけるためのWidget

はじめに

今回はUIをきれいに書くために使える便利な Widget についてまとめてみました。
ほとんどの間隔は SizedBox,Padding で書くことができますが、コードの見やすさやよりきれいなUIにするための Widget が多くあります。
View をこれまで書いてきて教えてもらったり、調べて学んだりしたことを今後もしっかり活用していくために改めてAI等を駆使しながら調べてみました。

SizedBox

初心者が間隔をあけるために一番最初に思いつくのがこれだと思います。
SizedBox はプロパティに width と height があり、それぞれ幅と高さを調整してくれます。テキストやアイコンのサイズを調整するためにも使うことができます。
ただ、間隔をあけるという点ではあまり使わない方がいいかもしれません。
もちろんすべてが悪いというわけではないですが、他の Widget と並んでいるとそれが即座に間隔を表していると気が付きにくいため、コードの可読性が下がる場合があるからです。
以下は SizedBox を用いたコードの例です。

SizedBox(
  width: 16,
  height: 24,
)

Padding

これは主にテキストや Widget に周りに余白を付けるために使用します。
EdgeInsets というものを使いますが、これにはいくつかパターンがあります。
以下はその例です。

• EdgeInsets.all(8)
  これは四方にそれぞれ同じ分だけの余白を作ります。

• EdgeInsets.symmetric(horizontal: 16)
  　これは左右、または上下対称に同じ数分だけ余白を作ります。
  　左右方向は horizontalで、縦方向は vertical を使います。

• EdgeInsets.only(left: 24)
  これは上下左右をそれぞれ指定して余白を作ります。
  　上：top,下:bottom,右:right,左:left をそれぞれ使います。

以下は実際に Padding を用いたコードの例です。

Padding(
  padding: EdgeInsets.all(16),
  child: Text('こんにちは'),
)

Gap

これは主に縦の間隔を指定するために使われる Widget で、Flutter のパッケージの一つです。
Gap(16) と書くだけで SizedBox(height: 16) と同じレイアウトになるため非常に楽で見やすくなります。また、Row の中に入れることで、横向きの間隔を設定することもできます。
以下はコード例です。

Column(
  children: [
    Text('おはよう'),
    Gap(8),
    Text('こんにちは'),
    Gap(16),
    Text('こんばんは'),
  ],
)

Spacer

これは、Row や Column の中で自動的に間隔をあけてくれる Widget です。
数値等を設定してきちんと決められた間隔をあけるのではなく、残りのスペースを埋めてくれるので、Widget どうしの間隔を適切に保ってくれます。
また、プロパティの flex を使えば比率を調整することができます。
以下は Spacer を用いたコード例です。

Row(
  children: [
    Text('おはよう'),
    Spacer(flex: 1),
    Text('こんにちは'),
    Spacer(flex: 2),
    Text('こんばんは'),
  ],
)

Expanded

これは空いているスペースに対して、Widget を十分に広げて間隔を埋めたいときに使います。
そのため、Row,Column,Flex の中でのみしか使えませんが、Spacer と同じように flex を使うことで比率を調整することができます。
たとえば、以下のコード例のように、真ん中に複数のボタンを横で均等に並べたい場合などに使うと有効です。

Row(
  children: [
    Expanded(child: ElevatedButton(onPressed: () {}, child: Text('キャンセル'))),
    Gap(8),
    Expanded(child: ElevatedButton(onPressed: () {}, child: Text('保留'))),
    Gap(8),
    Expanded(child: ElevatedButton(onPressed: () {}, child: Text('決定'))),
  ],
)

Flexible

これは、Expanded と同じように空いているスペースを埋めてくれる Wiget ですが、絶対にスペースを埋めてくれる Expanded と違って　Flexible は必要な時に必要な部分だけ埋めてくれます。
青い箱のサイズはそのままで、画面が小さくなった場合などに自動で小さく縮んでくれます。
以下は Flexible

Row(
  children: [
    Flexible(
      child: Container(width: 200, color: Colors.blue, height: 50),
    ),
    Container(width: 100, color: Colors.red, height: 50),
  ],
)

最後に

今回はきれいなUI、見やすいコードを書くために便利なものについてまとめました。どれを使うのがよいのか、適切に選択してUIを書けるように心がけたいと思います。