FittedBox要素

FittedBoxウィジェット

概要

FittedBoxウィジェットは、子要素が親要素より大きい場合に作用させるウィジェットである。

見た目

UI系ウィジェットではないのでなし

解説

例えば以下のような状態

SizedBox(
	width: 100,
	height: 100,
	child: SizedBox(
		width: 200,
		height: 100,
		child: ...
	)
)

この際、Flutter側では要素がはみ出てしまったためにエラーが起こってしまう。
この時にFittedBoxを使用して大きさを調整することができる。

SizedBox(
	width: 100,
	height: 100,
	child: FittedBox(
		child: SizedBox(
			width: 200,
			height: 100,
			child: ...
		)
	)
)

このようなコードの時、子要素の大きさは親要素の大きさに制限される。
その時、はみ出た部分をカットするか、子要素を親要素に合わせて小さくするかはfitプロパティで選択することができる。

以下のコードは親要素からはみ出てしまった部分を切り取って表示するものである。

SizedBox(
	width: 100,
	height: 100,
	child: FittedBox(
		fit: FitBox.none, //切りとり
		child: SizedBox(
			width: 200,
			height: 100,
			child: ...
		)
	)
)

プロパティ

プロパティ名	概要	備考
fit	子ウィジェットがどのようにフィットするかを制御します。可能な値はfill, contain, cover, noneなどです。デフォルトはfillです。
alignment	子ウィジェットの位置を指定する。 デフォルトはAlignment.center。	fitがcontainまたはcoverの場合にのみ有効。
widthFactor	親コンテナの幅に対する子ウィジェットの幅の比率を設定する。 デフォルトはnull（親コンテナの幅に合わせて）。	fitがfillの場合にのみ有効。
heightFactor	親コンテナの高さに対する子ウィジェットの高さの比率を設定する。 デフォルトはnull（親コンテナの高さに合わせて）。	fitがfillの場合にのみ有効。
clipBehavior	クロップの挙動を制御する。 可能な値はClip.none, Clip.hardEdge, Clip.antiAliasなどです。	デフォルトはClip.hardEdgeです。

fitについて

fitの値	概要	備考
BoxFit.contain	子ウィジェットを親コンテナ内に完全に収めるようにスケーリングする。 子ウィジェットのアスペクト比は保持されるが、親コンテナ全体を満たすわけではない。	子ウィジェットが親コンテナの範囲外になることはないが、親コンテナ全体を満たすわけではないため、空白が生じることがある。
BoxFit.cover	子ウィジェットを親コンテナ全体にカバーするようにスケーリングする。 子ウィジェットのアスペクト比は保持されるが、必要に応じてクロップされる。	子ウィジェットが親コンテナ全体をカバーするようにスケーリングされるが、アスペクト比を保つために部分的なクロップが発生することがある。
BoxFit.fill	子ウィジェットを親コンテナ全体にフィルムするようにスケーリングする。 子ウィジェットのアスペクト比は変更される。	子ウィジェットが親コンテナ全体を満たすようにスケーリングされるが、アスペクト比は変更されるため、元の形状とは異なる可能性がある。
BoxFit.fitHeight	子ウィジェットの高さを親コンテナの高さに合わせるようにスケーリングする。 子ウィジェットのアスペクト比は保持さるが、横方向にはスケールされない。	子ウィジェットの高さが親コンテナの高さに合うようにスケーリングされるが、横方向にはスケールされないため、親コンテナの幅を超える可能性がある。
BoxFit.fitWidth	子ウィジェットの幅を親コンテナの幅に合わせるようにスケーリングする。 子ウィジェットのアスペクト比は保持されるが、縦方向にはスケールされない。	子ウィジェットの幅が親コンテナの幅に合わせられるようにスケーリングされるが、縦方向にはスケールされないため、親コンテナの高さを超える可能性がある。
BoxFit.none	子ウィジェットを親コンテナ内に配置するが、スケーリングは行わない。	子ウィジェットが親コンテナ内に配置されるが、アスペクト比の変更やスケーリングは行われない。