Expanded Widget preenche espaços no Flutter

O Expanded Widget expande um child de uma RowColumn ou Flex para que o child preencha o espaço disponível na estrutura de layout do Flutter.

Expanded Widget preenche espaços no Flutter

O uso de um widget Expanded faz com que um child de uma RowColumn ou Flex se expanda para preencher o espaço disponível ao longo do eixo principal (por exemplo, horizontalmente para uma Linha ou verticalmente para uma Coluna).

Se vários filhos forem expandidos, o espaço disponível será dividido entre eles de acordo com o fator Flex.

Um widget Expanded deve ser um descendente de uma RowColumn ou Flex e o hierarquia do widget Expanded para sua RowColumn ou Flex deve conter apenas StatelessWidgets ou StatefulWidgets (não outros tipos de widgets, como RenderObjectWidgets tipo ConstrainedLayoutBuilder, LeafRenderObjectWidget, ListWheelViewport, MultiChildRenderObjectWidget, RenderObjectToWidgetAdapter, SingleChildRenderObjectWidget, SliverWithKeepAliveWidget e Table).

Para este artigo vou usar o seguinte widget customizado chamado MyWidget:

%MINIFYHTML7bf895da3d3e2d625dff88b5b98413eb16%
Widget MyWidget(_title) { return Card( color: Colors.red, child: Padding( padding: EdgeInsets.all(25), child: Text( _title.toString(), textAlign: TextAlign.center, style: TextStyle( color: Colors.white, fontSize: 25, fontWeight: FontWeight.bold, ), ), ), ); },

Exemplos de uso do Expanded Widget

Se você tem alguns widgets em uma linha ou coluna, pode abraçar os filhos assim:

Row( children: [ MyWidget(1), MyWidget(2), MyWidget(3), ], ),

Para alinhar os itens da linha, você pode usar a propriedade mainAxisAlignment do Row, com o valor MainAxisAlignment.spaceBetween que vai deixar todos os widgets com o mesmo espaço entre eles:

Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ MyWidget(1), MyWidget(2), MyWidget(3), ], ),

É aí que entra o Expanded Widget, pois se você deseja que um dos widgets se expanda para preencher o espaço extra na linha ou coluna, é possível agrupá-lo facilmente com um widget Expanded:

Row( children: [ Expanded( child: MyWidget(1), ), Expanded( child: MyWidget(2), ), Expanded( child: MyWidget(3), ), ], ),

Você pode ainda mixar os Widgets com e sem o Expanded para criar layouts mais atraentes:

Row( children: [ MyWidget(1), Expanded( child: MyWidget(2), ), MyWidget(3), ], ),

E se você possui alguns widgets que deseja compartilhar o espaço extra (mas não igualmente), pode definir a propriedade flex do Widget Expanded.:

children: [ MyWidget(1), Expanded( flex: 2, child: MyWidget(2), ), Expanded( flex: 5, child: MyWidget(3), ), ], ),

No exemplo acima o primeiro e o terceiro widgets têm um tamanho fixo. O segundo e o quarto widget da Row compartilham o espaço extra porque são agrupados com o Expanded.

No entanto, como os fatores flex estão sendo usados, o segundo widget obtém o dobro da largura do box.

O uso do Widget Expanded é fundamental para que você possa preencher os espaços no Layout dos apps desenvolvidos no Flutter.

Não deixe de ler o artigo sobre o Image Widget.

Um grande abraço!

Deixe uma resposta