Flutter: Expandido vs Flexível

Eu usei os dois Expandede Flexibleos widgets e eles parecem funcionar mesmo.

Qual é a diferença entre Expandido e Flexível?

Scaffold(
  appBar: AppBar(),
  body: Column(
    children: <Widget>[
      Row(
        children: <Widget>[
          buildExpanded(),
          buildFlexible(),
        ],
      ),
      Row(
        children: <Widget>[
          buildExpanded(),
          buildExpanded(),
        ],
      ),
      Row(
        children: <Widget>[
          buildFlexible(),
          buildFlexible(),
        ],
      ),
    ],
  ),
);

Expanded é apenas uma abreviatura para Flexible

Usando expandido desta forma:

Expanded(
  child: Foo(),
);

é estritamente equivalente a:

Flexible(
  fit: FlexFit.tight,
  child: Foo(),
);

Você pode querer usar Flexibleover Expandedquando quiser um diferente fit, útil em alguns layouts responsivos.

A diferença entre FlexFit.tighte FlexFit.looseé que solto permitirá que seu filho tenha um tamanho máximo, enquanto a força apertada força esse filho a preencher todo o espaço disponível.

Widget em Flexível são, por padrão, WRAP_CONTENT, embora você possa alterá-lo usando o parâmetro Fit.

O widget em Expandido é MATCH_PARENT, você pode alterá-lo usando o flex .

Expanded- é Flexiblecom ajuste definido

class Expanded extends Flexible {
    const Expanded({
        Key key,
        int flex = 1,
        @required Widget child,
    }) : super(
        key: key, 
        flex: flex, 
        fit: FlexFit.tight, 
        child: child
    );
}

Você pode usar Flexível para redimensionar os widgets em linhas e colunas . É usado principalmente para ajustar o espaço dos diferentes widgets filhos enquanto mantém a relação com seus widgets pais.

Enquanto isso, Expanded altera as restrições enviadas aos filhos de linhas e colunas ; ajuda a preencher os espaços disponíveis. Portanto, quando você envolve seu filho em um widget Expandido, ele preenche os espaços vazios.

Fornecer esses vídeos do canal oficial do Flutter no YouTube apenas para ajudar as pessoas, que podem esperar por isso no futuro ...

1. Expandido:

2. Flexível:

A única diferença se você usar em Flexiblevez de Expanded, é que Flexiblepermite que seu filho tenha a mesma largura ou menor que o Flexiblepróprio, enquanto Expandedforça seu filho a ter exatamente a mesma largura de Expanded. Mas ambos Expandede Flexibleignoram a largura de seus filhos quando se medem.

Row(children:[
  Flexible(
    child: Container(color: Colors.red, child: Text('This is a very long text that won’t fit the line.'))),
  Flexible(
    child: Container(color: Colors.green, child: Text(‘Goodbye!’))),
  ]
)

Observação : isso significa que é impossível expandir os Rowfilhos proporcionalmente aos seus tamanhos. A linha usa a largura exata do filho ou a ignora completamente quando você usa Expandedou Flexible.

Expanded () nada mais é do que flexível () com

Flexible (fit: FlexFit.tight) = Expanded()

mas o flexível usa fit :FlexFit.loosepor padrão.

FlexFit.tight = Quer se ajustar bem aos pais, ocupando o máximo de espaço possível.

FlexFit.loose = Quer se soltar no pai, ocupando o mínimo de espaço possível para si.