Dúvida entre a diferença do exemplo 9 e 10 na documentação de constraints do flutter

https://docs.flutter.dev/ui/layout/constraints?source=post_page-----90602d8c37ab--------------------------------

Não consegui entender muito a diferença entre o exemplo 9 e o exemplo 10.

Example 9 # Example 9 layout ConstrainedBox( constraints: const BoxConstraints( minWidth: 70, minHeight: 70, maxWidth: 150, maxHeight: 150, ), child: Container(color: red, width: 10, height: 10), ) content_copy You might guess that the Container has to be between 70 and 150 pixels, but you would be wrong. The ConstrainedBox only imposes additional constraints from those it receives from its parent.

Here, the screen forces the ConstrainedBox to be exactly the same size as the screen, so it tells its child Container to also assume the size of the screen, thus ignoring its constraints parameter.

Example 10 # Example 10 layout Center( child: ConstrainedBox( constraints: const BoxConstraints( minWidth: 70, minHeight: 70, maxWidth: 150, maxHeight: 150, ), child: Container(color: red, width: 10, height: 10), ), ) content_copy Now, Center allows ConstrainedBox to be any size up to the screen size. The ConstrainedBox imposes additional constraints from its constraints parameter onto its child.

The Container must be between 70 and 150 pixels. It wants to have 10 pixels, so it ends up having 70 (the minimum).

Oi Gabriel, tudo bem?

Vou tentar te ajudar.

Exemplo 9

ConstrainedBox(
  constraints: const BoxConstraints(
    minWidth: 70,
    minHeight: 70,
    maxWidth: 150,
    maxHeight: 150,
  ),
  child: Container(color: red, width: 10, height: 10),
)

O ConstrainedBox tá diretamente na raiz da árvore de widgets e, portanto, herda as constraints do seu pai, que é a tela inteira. Isso significa que a tela está forçando o ConstrainedBox a ter exatamente o mesmo tamanho da tela. Como resultado, o Container dentro do ConstrainedBox também acaba ignorando suas próprias dimensões e constraints, e assume o tamanho da tela.

Exemplo 10

Center(
  child: ConstrainedBox(
    constraints: const BoxConstraints(
      minWidth: 70,
      minHeight: 70,
      maxWidth: 150,
      maxHeight: 150,
    ),
    child: Container(color: red, width: 10, height: 10),
  ),
)

Aqui, o ConstrainedBox tá dentro de um widget Center. O Center permite que o ConstrainedBox tenha qualquer tamanho até o limite da tela. Isso significa que o ConstrainedBox agora pode aplicar suas próprias constraints ao Container filho. O Container, que inicialmente quer ter 10x10 pixels, é forçado a se ajustar às constraints do ConstrainedBox, resultando em um tamanho mínimo de 70x70 pixels.

Resumindo

Exemplo 9: O ConstrainedBox é forçado a ter o tamanho da tela, então as constraints definidas nele são ignoradas.
Exemplo 10: O ConstrainedBox tá dentro de um Center, que permite que ele aplique suas próprias constraints ao Container, resultando no Container tendo pelo menos 70x70 pixels.

Espero ter te ajudado a entender melhor.

Um abraço e bons estudos.