104 – CONTAINER EM FLUTTER – Aprender Flutter em Português
Playlist: Curso Grátis de FLUTTER e DART Completo
Container (Recipiente)
Muitos layouts fazem uso liberal de Containers para separar widgets usando padding ou para adicionar bordas ou margens. Você pode alterar o plano de fundo do dispositivo colocando todo o layout em um contêiner e alterando a cor ou a imagem do plano de fundo.
Resumo (Contêiner)
Adicionar preenchimento, margens e bordas
Alterar a cor ou a imagem de fundo
Contém um único widget filho, mas esse filho pode ser uma linha, uma coluna ou até mesmo a raiz de uma árvore de widgets
Diagrama mostrando: margem, borda, preenchimento e conteúdo
Exemplos (contêiner)
Este layout consiste em uma coluna com duas linhas, cada uma contendo duas imagens. Um Contêiner é usado para alterar a cor de fundo da coluna para um cinza mais claro.
content_copy
Widget _buildImageColumn () =MAIOR Contêiner (
decoração: BoxDecoration (
cor: Colors.black26,
)
criança: Coluna (
crianças: [
_buildImageRow (1),
_buildImageRow (3),
]
)
);
Captura de tela mostrando duas linhas, cada uma contendo duas imagens
Um Contêiner também é usado para adicionar uma borda e margens arredondadas a cada imagem:
content_copy
Widget _buildDecoratedImage (int imageIndex) =MAIOR Expandido (
criança: Recipiente (
decoração: BoxDecoration (
border: Border.all (largura: 10, cor: Colors.black38),
borderRadius: const BorderRadius.all (const Radius.circular (8)),
)
margin: const EdgeInsets.all (4),
criança: Image.asset (‘images / pic $ imageIndex.jpg’),
)
);
Widget _buildImageRow (int imageIndex) =MAIOR Linha (
crianças: [
_buildDecoratedImage (imageIndex),
_buildDecoratedImage (imageIndex + 1),
]
);
Você pode encontrar mais exemplos de Contêiner no tutorial e na Galeria Flutter.
Vamos ver sobre containers em flutter, container button, container card, container align bottom, center, left, right, aligment, all screen, border, padding, margin de container.