Esse artigo faz parte de uma série chamada "Widgets da Semana", para saber mais sobre essa ela leia nossa introdução.
Expaned
O video do Widget da semana postado no dia 21 de agosto de 2018, fala sobre Expanded.
Esse widget é usado para organizar o espaço ocupado por itens em Rows, Columns e Flex. Ele faz com que esse item ocupe o espaço vago dentro do seu pai.
Quando a renderização acontece, primeiro é construido os filhos que não são flexiveis e depois os que são flexíveis vão ser calculados com o espaço restante.
Você pode pensar como se fosse um display flex no CSS, onde essa caixa vai se expandir ocupando o todo espaço restate ou então em uma proporção indicada.
Como um exemplo de uso temos o código:
Column(
children: <Widget>[
Container(
color: Colors.black,
height: 100,
),
Expanded(
child: Container(color: Colors.indigo),
),
Expanded(
child: Container(color: Colors.pinkAccent),
)
],
),
Que produz o segunte resultado:
Você pode ver que sem indicar o tamanho ocupado pelos retangulos azul e rosa eles se organizaram baseado nas regras de expanded.
Mas e se eu quiser que um seja de um tamanho diferente do outro?
É so usar o atributo de flex e indicar a proporção de espaço a ser ocupado:
Column(
children: <Widget>[
Container(
color: Colors.black,
height: 100,
),
Expanded(
child: Container(color: Colors.indigo),
flex: 2,
),
Expanded(
child: Container(color: Colors.pinkAccent),
)
],
),
Assim obtemos o seginte resultado
O retângulo azul com o flex de 2 esta tomando o dobro de espaço que o rosa (o valor default/padrão do flex é 1).
Sobre Nós
Eu e o pessoal da Flutter Nation estamos em uma página e um grupo no Facebook.
Também estamos no Meetup e no GitHub!
Top comments (0)