Contents
Example 11
Center(
child: ConstrainedBox(
constraints: BoxConstraints(
minWidth: 70,
minHeight: 70,
maxWidth: 150,
maxHeight: 150,
),
child: Container(color: Colors.red, width: 1000, height: 1000),
)
)CenterウィジェットはConstrainedBoxウィジェットに対して、スクリーンサイズを上限とする任意のサイズを認めます。
ConstrainedBoxウィジェットは、そのconstraintsパラメーターに基づき、その子ウィジェットに追加の制約を課します。
Containerウィジェットは、幅、高さが70〜150pxでなければなりません。Containerウィジェット自体は1000pxと指定されています。結果的にContainerウィジェットの幅・高さは150px(最大)となります。
Example12
Center(
child: ConstrainedBox(
constraints: BoxConstraints(
minWidth: 70,
minHeight: 70,
maxWidth: 150,
maxHeight: 150,
),
child: Container(color: Colors.red, width: 100, height: 100),
)
)
CenterウィジェットはConstrainedBoxウィジェットに対して、スクリーンサイズを上限とする任意のサイズを認めます。
ConstrainedBoxウィジェットは、そのconstraintsパラメーターに基づき、その子ウィジェットに追加の制約を課します。
Containerウィジェットは、幅、高さが70〜150pxでなければなりません。Containerウィジェット自体は100pxと指定されています。結果的に希望通り幅・高さ100pxと決定されます。
Example13
UnconstrainedBox(
child: Container(color: Colors.red, width: 20, height: 50),
)スクリーンはUnconstrainedBoxウィジェットに対し、スクリーンと同じサイズになることを強制しますが、しかし、UnconstrainedBoxは自身の子ウィジェット(赤Containerウィジェット)に対し任意のサイズを認めます。
Example14
UnconstrainedBox(
child: Container(color: Colors.red, width: 4000, height: 50),
)スクリーンはUnconstrainedBoxウィジェットに対し、スクリーンと同じサイズになることを強制します。
そしてUnconstrainedBoxウィジェットは、自身の子ウィジェットのContainerウィジェットに対し、任意のサイズを認めます。
残念なことに、このサンプルではContainerウィジェットの幅が4000pxに指定されており、これはUnconstrainedBoxウィジェットの幅(＝スクリーン幅)におさまりません。
そのため、UnconstrainedBoxは非常に恐ろしい「オーバーフロー警告」を表示します。
Example15
OverflowBox(
minWidth: 0.0,
minHeight: 0.0,
maxWidth: double.infinity,
maxHeight: double.infinity,
child: Container(color: Colors.red, width: 4000, height: 50),
);スクリーンはOverflowBoxウィジェットに対し、スクリーンと同じサイズになることを強制します。
そしてOverflowBoxウィジェットは、自身の子ウィジェットのContainerウィジェットに対し、任意のサイズを認めます。
OverflowBoxウィジェットは、UnconstrainedBoxウィジェットと似ていますが、両者の違いは、(OverflowBoxウィジェットは)子ウィジェットが自身のサイズを超えても警告を出さないことです。
Example15では、Containerウィジェットは幅が4000pxと指定されています。これはOverflowBoxウィジェットの幅(=スクリーン幅)を超えています。しかしオーバーフロー警告を示さず、シンプルに表示します。
Example16
←エラー発生。
UnconstrainedBox(
child: Container(
color: Colors.red,
width: double.infinity,
height: 100,
)
)
これは何もレンダーしません。そしてコンソールにエラーメッセージが表示されます。
UnconstrainedBoxは自身の子ウィジェットに対し任意のサイズを認めますが、しかし子ウィジェットは無限の幅が指定されたContainerウィジェットです。
Flutterは無限のサイズをレンダーすることができません。ですから以下のエラーメッセージを表示し、エラーをスローします。
BoxConstraints forces an infinite width.
Example17
UnconstrainedBox(
child: LimitedBox(
maxWidth: 100,
child: Container(
color: Colors.red,
width: double.infinity,
height: 100,
)
)
)Example17ではエラーは出ません。UnconstrainedBoxウィジェットは、自身の子ウィジェットに対し任意のサイズを認めますので、この場合無限の幅を認めることになります。それだけだとエラーが発生することになります(Example14)。
しかしExample17のように、無限の幅が指定されている子(Container)ウィジェットをLimitedBoxウィジェットでラップすると、Containerウィジェットに対し、上限幅(maxWidth)である100pxを渡します。
UnconstrainedBoxをCenterウィジェットに交換すると、LimitedBoxはその制限を適用しなくなり（制限は無限の制約を取得した場合にのみ適用されるため）、コンテナの幅は100を超えて拡大できます。
Example18
FittedBox(
child: Text('Some Example Text.'),
)スクリーンはFittedBoxに対して、スクリーンと同じサイズになることを強制します。テキストには、テキストの量やフォントサイズなどに応じて、自然な幅（固有の幅とも呼ばれます）があります。
FittedBoxウィジェットはTextウィジェットに対して(原則的には)任意のサイズを認めますが、しかし、Textウィジェットが自身のサイズをFittedBoxウィジェットに伝えた後、FittedBoxウイジェットは、利用可能な幅(ここではスクリーン幅)に合わせてTextウィジェットの幅を調節します。
(「任意のサイズを認める」と言っているが、結局文字数によってフォントサイズが変わることになる。)
Example19
Center(
child: FittedBox(
child: Text('Some Example Text.'),
)
)FittedBoxをCenterウィジェットでラップしたらどうなるでしょうか?
CenterウィジェットはFittedBoxウィジェットに対して、スクリーンサイズを上限に任意のサイズを認めます。
それからFittedBoxは、自身のサイズをTextウィジェットに合わせます。そしてTextウィジェットに対し、任意のサイズを認めます。FittedBoxウィジェットのサイズとTextウィジェットのサイズが同じなので、サイズの調節は行われません。
Example20
しかし、
工事中🏗
参考
