Widgets Flutter: SizedBox vs Container

Tempo de leitura: 2 minutes

Quando comecei minha jornada como desenvolvedor flutter, meu cérebro processou essa estrutura olhando para ela como se fosse um jogo de Tetris ou um conjunto de lego. Onde empilhar widgets para criar uma bela interface do usuário funcional.

Como eu disse no meu blog anterior, alguns widgets parecem estar executando as mesmas funções no framework flutter e hoje estamos olhando para dois widgets: SizedBox e Container.

Enquanto desenvolvia no framework flutter, eu me perguntava constantemente, qual é a diferença entre esses dois widgets, por que usar um em vez do outro? Aqui está uma olhada no que eu descobri sobre esses widgets.

SizedBox: Basicamente este é um widget que permite ao desenvolvedor dar um tamanho (altura e largura) para uma caixa. Se for usado como um widget pai, o widget filho assume a forma do widget pai, a menos que seja alterado. SizedBox pode ser mantido entre dois widgets para obter algum espaço entre eles. Eu diria que é outro nome para container com menos propriedades.

const SizedBox(
{
  Key key,
  double width,
  double height,
  Widget child}
)

Container: esse widget está ativado e permite a combinação de vários recursos, como pintura, posicionamento e dimensionamento de widgets. Ele permite que o desenvolvedor armazene mais de um widget dentro de si e os posicione em uma tela de acordo com nossos sentimentos. É mais ou menos uma caixa de arrumação.

Ao contrário do SizedBox, você pode fazer um contêiner parecer de uma certa maneira, basicamente mudando sua forma, cor e muito mais.

Container({
           Key key,
           AlignmentGeometry alignment, 
           EdgeInsetsGeometry padding, 
           Color color, 
           Decoration decoration, 
           Decoration foregroundDecoration, 
           double width, 
           double height, 
           BoxConstraints constraints, 
           EdgeInsetsGeometry margin, 
           Matrix4 transform, 
           Widget child, 
           Clip clipBehavior: Clip.none
});

Quando você usa um dos widgets?

Eu diria para usar SizedBox mais ou menos como um espaço reservado, use-o quando não precisar alterar a forma ou a cor, ou talvez quando quiser adicionar espaços entre outros widgets. Em seguida, use os containers para decorações mais complexas, como mudança de forma (círculo, círculo retangular, etc.) e se quiser mudar a posição ou talvez se estiver pensando em adicionar algumas animações ao container.

Aí está, pessoal, esses são meus pensamentos sobre esses dois widgets, deixe-me saber seus pensamentos no comentário abaixo.