SizedBox の使い方 【Flutter】

「 SizedBox の使い方が知りたい！ 」

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

Flutterで頻出するウィジェットの、SizedBox について解説します。

基本的な使い方から、用意されているコンストラクタの紹介まで行います。

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

基本的な使い方

SizedBox ウィジェットは、
heightで設定した高さ、widthで設定した幅を持つ無色の長方形を用意するウィジェットです。

child にてウィジェットを設定することで、
箱で大きさを制限しつつ、設定したウィジェットを箱の中に表示することができます。

SizedBox(
  height: 50,
  width: 100,
  child: Text('a'),
),

コンストラクタの紹介

SizedBoxにはいくつかのコンストラクタが用意されています。
これらについて紹介します。

SizedBox.expand

SizedBox.expandは親のウィジェットが許す限り最大の大きさの箱を用意するSizedBoxです。
height, widthにはそれぞれdouble.infinityが設定されます。

  const SizedBox.expand({ super.key, super.child })
    : width = double.infinity,
      height = double.infinity;

SizedBox.shrink

SizedBox.shrink は高さも幅も0.0の箱を用意するSizedBoxです。
height, widthにはそれぞれ0.0が設定されます。

  const SizedBox.shrink({ super.key, super.child })
    : width = 0.0,
      height = 0.0;

SizedBox.fromSize

SizedBox.fromSizeはsizeプロパティにて設定したSizeインスタンスを基にして用意した
高さと幅をもつSizedBoxです。
height, widthにはそれぞれsizeのheight, widthが設定されます。

  SizedBox.fromSize({ super.key, super.child, Size? size })
    : width = size?.width,
      height = size?.height;

SizedBox.square

SizedBox.square はdimensionプロパティにて設定したdoubleの値を
高さと幅に持つ正方形を用意するSizedBoxです。
height, widthにはそれぞれdimensionの値が設定されます。

  const SizedBox.square({super.key, super.child, double? dimension})
    : width = dimension,
      height = dimension;

まとめ

本記事ではFlutterで頻出するウィジェットのSizedBoxについて解説しました。

基本的な使い方から、用意されているコンストラクタの紹介まで行いました。

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

SizedBoxは本当によく利用する基本的なウィジェットとなります。

ぜひ利用方法を覚えて活用してみてください！

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

編集後記（2022/11/12）