サンプルコードは↓にあります。
Contents
this GitHub repo
Example 3
Center(
child: Container(width: 100, height: 100, color: Colors.red)
)
スクリーンがCenterウィジェットに対して、スクリーンと同じサイズであることを強制します。ですからCenterウィジェットはスクリーンと同じサイズを占有します。
CenterウィジェットがContainerウィジェットに対して、「あなたは自分の望むサイズでいいです。しかしスクリーンを超えるサイズにはなれません」と言います。その結果Containerのサイズは100✖️100になります。
Example 4
Align(
alignment: Alignment.bottomRight,
child: Container(width: 100, height: 100, color: Colors.red),
)example3ではCenterウィジェットでラップしましたが、Example4ではAlignウィジェットでラップしています。
AlignウィジェットもContainerウィジェットに対して、「あなたは自分の望むサイズでいいです。」と言います。
ただし、空きスペースがある場合は、Containerを中央に配置しません。 代わりに、コンテナを使用可能なスペースの右下に揃えます。
Example5
Center(
child: Container(
color: Colors.red,
width: double.infinity,
height: double.infinity,
)
)
スクリーンがCenterウィジェットに対して、スクリーンと同じサイズであることを強制します。ですからCenterウィジェットはスクリーンと同じサイズを占有します。
CenterウィジェットはContainerウィジェットに対し、CenterウィジェットがContainerウィジェットに対して、「あなたは自分の望むサイズでいいです。しかしスクリーンを超えるサイズにはなれません」と言います。
Container自身には無限のサイズ(double.infinity)が指定されていますのでそのサイズを望みますが、スクリーンを超えるサイズにはなれませんので、結果的にスクリーンと同じ領域を占有します。
Example6
Center(child: Container(color: Colors.red))スクリーンがCenterウィジェットに対して、スクリーンと同じサイズであることを強制します。ですからCenterウィジェットはスクリーンと同じサイズを占有します。
CenterウィジェットはContainerウィジェットに対し、CenterウィジェットがContainerウィジェットに対して、「あなたは自分の望むサイズでいいです。しかしスクリーンを超えるサイズにはなれません」と言います。
Containerウィジェットは子ウィジェットを持っておらず、サイズ指定もありません。Containerウィジェットはできる限り大きいサイズを望みます。その結果Containerウィジェットはスクリーン全体を占有します。
しかし、なぜContainerはそのように決定するのでしょう？ これは、Containerウィジェットを作成した人による設計上の決定だからです。 作成方法が異なる可能性があり、状況に応じて、Containerウィジェットのドキュメントを読んで、その動作を理解する必要があります。
Example7
Center(
child: Container(
color: Colors.red,
child: Container(color: Colors.green, width: 30, height: 30),
)
)スクリーンがCenterウィジェットに対して、スクリーンと同じサイズであることを強制します。ですからCenterウィジェットはスクリーンと同じサイズを占有します。
Centerウィジェットは赤いContainerウィジェットに対し、CenterウィジェットがContainerウィジェットに対して、「あなたは自分の望むサイズでいいです。しかしスクリーンを超えるサイズにはなれません」と言います。赤いContainerはサイズ指定がありませんが、子ウィジェットを持っています。ということで、赤いContainerウィジェットは、子ウィジェットと同じサイズを希望します。
赤いContainerが子ウィジェット(緑のContainerウィジェット)に対して、あなたは自分の望むサイズでいいです。しかしスクリーンを超えるサイズにはなれません」と言います。
(赤いContainerの)子ウィジェットは緑のContainerウィジェットで、サイズ30✖️30を希望します。
赤のContainerは子ウィジェットのサイズと同じサイズであるため、30×30になります。緑Containerウィジェットが赤Containerウィジェットを完全に覆っているため、赤の色は表示されません。
Example8
Center(
child: Container(
color: Colors.red,
padding: const EdgeInsets.all(20.0),
child: Container(color: Colors.green, width: 30, height: 30),
)
)赤Containerウィジェット自身のサイズは子ウィジェット(緑Containerウィジェット)と同じになります。しかし、赤Container自身のpadding(パディング)を考える必要があります。
パディングがあるので、パディングの分だけ赤色が見えるようになります。緑ContainerウィジェットのサイズはExample7と同じです。
Example9
ConstrainedBox(
constraints: BoxConstraints(
minWidth: 70,
minHeight: 70,
maxWidth: 150,
maxHeight: 150,
),
child: Container(color: Colors.red, width: 10, height: 10),
)
Containerウィジェットは70〜150ピクセルでなければならないと思うかもしれませんが、それは間違いです。 ConstrainedBoxは、自身が親(スクリーン)から受け取った制約とは別に、追加の制約を課します。(自身が親(スクリーン)から受け取った制約が無くなる訳ではない、ということ)
ここで、スクリーンはConstrainedBoxに対して、スクリーンとまったく同じサイズにするように強制します。
ConstrainedBoxは、子であるContainerウィジェットに対してスクリーンのサイズを想定するように指示しますので、(ConstrainedBoxの)constraintsパラメーター(追加の制約)を無視します。
Example10
Center(
child: ConstrainedBox(
constraints: BoxConstraints(
minWidth: 70,
minHeight: 70,
maxWidth: 150,
maxHeight: 150,
),
child: Container(color: Colors.red, width: 10, height: 10),
)
)CenterウィジェットはConstrainedBoxウィジェットに対して、スクリーンサイズを上限とする任意のサイズを認めます。
ConstrainedBoxウィジェットは、そのconstraintsパラメーターに基づき、その子ウィジェットに追加の制約を課します。
Containerウィジェットの幅、高さは70〜150ピクセルである必要があります。 Containerウィジェット自身の幅・高さは10ピクセルなので、最終的に70ピクセル（最小）になります。
参考
https://flutter.dev/docs/development/ui/layout/constraints
