Um estudo sobre Flutter Expanded

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!