loading...
Cover image for Um estudo sobre Flutter Expanded
Flutter

Um estudo sobre Flutter Expanded

biaherculano profile image Beatriz Herculano ・2 min read

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:

Aplicativo com 3 retangulos, o primeiro sendo preto e menor e os restantes do mesmo tamanho, um azul e o outro rosa

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

Aplicativo com 3 retangulos, o primeiro sendo preto e menor, os outros dois sendo de tamanhos diferentes, o segundo sendo o dobro de tamanho do terceiro, o maior tem cor azul e o menor tem cor rosa

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!

Discussion

pic
Editor guide