FlutterのConstraintsについて

質問内容

FlutterのConstraintsについてご質問をさせていただきます。
以下のソースコード①は画面中央に赤色四角形のウィジェットを表示しているものになります。
Centerウィジェットは子であるContainerウィジェットに制約として
高さは画面の高さ以下、幅は画面の幅以下になるように与えています。
続いてソースコード②ではソースコード①のCenterウィジェットの部分のみをConstrainedBoxに書き換えたもので、制約はCenterと同じになるようにしたつもりだったのですが、ConstrainedBoxの制約はContainerウィジェットには効いておらず、Containerウィジェットは画面いっぱいに表示されてしまいます。
なぜソースコード②の方ではConstrainedBoxがContainerウィジェットに対して渡している制約は効かないことになるのでしょうか？
ご教授よろしくお願いいたします。

ソースコード①

Dart
1  Widget build(BuildContext context) {
2    return Scaffold(
3      body: Container(
4        color: Colors.blue[100],
5        constraints: const BoxConstraints.tightFor(
6          width: double.infinity,
7          height: double.infinity,
8        ),
9        child: Center(
10          child: Container(
11            width: 100,
12            height: 100,
13            color: Colors.red,
14          ),
15        ),
16      ),
17    );
18  }

ソースコード②

Dart
1  Widget build(BuildContext context) {
2    return Scaffold(
3      body: Container(
4        color: Colors.blue[100],
5        constraints: const BoxConstraints.tightFor(
6          width: double.infinity,
7          height: double.infinity,
8        ),
9        child: ConstrainedBox(
10          constraints: const BoxConstraints(
11            minHeight: 0,
12            minWidth: 0,
13            maxHeight: double.infinity,
14            maxWidth: double.infinity,
15          ),
16          child: Container(
17            width: 100,
18            height: 100,
19            color: Colors.red,
20          ),
21        ),
22      ),
23    );
24  }

行動規範の内容に同意します

回答1件

ベストアンサー

①
Container-Center-Containerという親子構成。
Center(実際はAlign)は子供に任意のサイズを設定できます。この場合100x100の正方形でサイズ調整されます。これは子供のContainerが親から何の制約も受けない状況で100x100と設定されているからです。
トップのContainerは無制限が設定されているので、Scaffoldのbody部の大きさになります。
そしてCenterは親の中心に位置するような座標に配置されるといった形になります。

②
Container-ConstrainedBox-Containerという親子構成。
中央がConstrainedBoxですが、Containerは基本的に内部でConstrainedBoxを使ってウィジェットのサイズ制約を行っているので、ConstrainedBox-ConstrainedBox-ConstrainedBoxと同等です。

この場合、トップのContainerの制約、無制限に大きくしろ(実際にはScaffoldのbody部の大きさですが)が末端の子供にまで伝播されます。
末端のContainerは100x100という制約をしてますが、基本これは無視され親の制約を受けたサイズ、つまり最大サイズになります。

詳細というか、配置に関してこうなるよ、というのが公式から出てるんで参考にしてください。
https://docs.flutter.dev/ui/layout/constraints

①はExample 3、②はExample 9が意味合い的に近いのかな。

投稿2024/05/17 02:23

ta.fu

総合スコア1749

jyagataro

2024/05/17 11:20 編集

ta.fu様ご質問にご回答いただきありがとうございます。いただいた回答で自分が何を勘違いしていたかが分かりかけている気がするのですが、もう一つご質問させてください。（いただいた公式も見ているのですが理解できず。。） ②ではサイズ制約は末端の子まで伝播しており、トップのContainerのサイズ制約が優先されているということは分かったのですが、①に関してはCenterが間に入っていることで、トップのContainerのサイズ制約が末端のContainerには伝播しない理由が今一つ理解出来ておりません。サイズ制約が下るのはConstrainedBoxを利用している場合のみということなのでしょうか？（Containerは内部的にConstrainedBoxを使用しているからサイズ制約が下る？）お手数をお掛けしますが、よろしくお願いいたします。