Expanded Widget preenche espaços no Flutter

Expanded Widget preenche espaços no Flutter

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

O uso de um widget Expanded faz com que um child de uma Row, Column 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 Row, Column ou Flex e o hierarquia do widget Expanded para sua Row, Column 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:

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),
  ],
),

que vai gerar algo desse tipo:

Row com 3 Widgets sem o Expanded

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),
  ],
),

Row com 3 Widgets sem o Expanded e com Alinhamento Igual

É 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),
    ),
  ],
),

Vai gerar o seguinte resultado:

Row com 3 Widgets com o Expanded

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),
  ],
),

O snippet acima vai resultar em:

Row com 3 Widgets sem o Expanded e Flex

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 quarto. O resultado é esse:

Row com 3 Widgets sem o Expanded e Flex diferentes

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

Um grande abraço!

Avaliação: