Fala, pessoal. Quando começamos a estudar sobre Dart/Flutter alguns widgets podem parecer iguais como o exemplo do Container e SizedBox.
No entanto, nesse artigo veremos que cada um tem seu devido espaço no código, e claro, suas diferenças. E é sobre isso que vamos falar hoje. Vamos lá?
Por que essa confusão acontece?
A princípio, usava-se o container para posicionar e/ou delimitar um espaço para um determinado widget. Também podemos levar em consideração que outras ferramentas como o CSS usam o container exatamente para isso.
Portanto, essas similaridades pode confundir as pessoas que estão querendo aprender e iniciar o desenvolvimento no Flutter.
Container vs SizedBox
Mas vamos ao que interessa: qual é a diferença de cada um dos widgets? Bom, darei um exemplo de utilização do container e, logo depois, um exemplo de utilização do SizedBox.
Podemos ver que o “WIDEGT 2” é filho de um Container.
Nesse contexto, o container serve para delimitar o espaço que o “WIDGET 2” ocupa.
Nele, as propriedades responsáveis por delimitarem o espaço são: o height, que serve para altura, e o width, para a largura.
Em seguida, vemos o que acontece caso as propriedades citadas acima sejam retiradas, e, com as propriedades de alinhamento usadas, ambos os widgets se localizam no centro da tela.
O exemplo abaixo usa o SizedBox:
Os atributos usados para posicionar os widgets filhos do sizedBox, são exatamente os mesmos usados anteriormente – height e width – e os widgets estão exatamente no mesmo lugar.
Então, qual a diferença?
Bem, logo de cara podemos ver que no código acima eu tenho a propriedade color, no container.
Essa propriedade muda a cor de fundo, algo que não conseguimos fazer no sizedBox, junto a outras propriedades como alinhamento, decoração do container e bordas.
Essas e outras propriedades interessantes só se tornam possíveis com o uso do widget container.
Após os argumentos apresentados, pode surgir a dúvida de por que usar o sizedBox.
Bom, SizedBox é um widget para fornecer uma altura ou largura constante entre dois widgets, o que, além de deixar o código mais limpo e “legível”, torna mais performático devido a utilização do “const” que torna aquilo constante. Ou seja, o Flutter não precisará se preocupar em ficar modificando aquele widget.
E quando usar cada um?
Portanto, use o sizedBox somente quando quiser separar um widget do outro. Como vimos acima, ele foi criado para isso e deixará o código mais “limpo” e “rápido”.
Mas quando você quiser realizar mudanças de estilo na “caixa” ao redor do widget, como adicionar bordas ou mudar a cor de fundo, use o container.
Conclusão
Nesse artigo vimos que, apesar de ambos os widgets se chocarem em alguns pontos, cada um tem sua função e objetivo dentro do código, e cabe ao programador decidir qual será melhor usar em cada momento.
Espero que tenha ficado claro e vocês tenham gostado, abraço e até a próxima!
Leia também…
Se você quiser saber um pouco mais sobre Flutter, confere esses links
Iniciando um projeto Flutter pelo VSCode
Flutter e MobX: Desenvolva uma Aplicação Completa – Masterclass 2021
