Flutter: Expandido vs Flexível

108

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

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

Paresh Mangukiya
fonte

Respostas:

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

insira a descrição da imagem aqui

Raouf Rahiche
fonte
6
Flexível ocupa apenas o espaço necessário, e Expandido ocupa todo o espaço disponível, respeitando o flexfator. Veja a documentação do Expandedwidget para mais informações.
Aleksandar,
105

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.

Rémi Rousselet
fonte
1
não Maximum sizee Available spacesignifica a mesma coisa aqui?
CopsOnRoad
Não, por maximumsize eu quis dizer algo como ter como filho de Flexible um ConstrainedBox com um maxHeight dentro de uma coluna
Rémi Rousselet
25
Em palavras fáceis, Flexible.tightvai forçar as crianças a ocuparem todo o espaço disponível e Flexible.loosevai deixar as crianças fazerem o que quiserem. Algumas crianças podem ocupar todo o espaço e outras não, dependendo de quais são seus tipos.
CopsOnRoad
43

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 .

Parvesh Khan
fonte
3
Ótima explicação para desenvolvedores Android!
SwiftiSwift
Mesmo que flexível pareça WRAP_CONTENT, usamos Alinhar dentro de flexível para um alinhamento no espaço disponível.
Akshar Patel
19

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
    );
}
Andrey Turkovsky
fonte
17

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:

onosegundo
fonte
1

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

insira a descrição da imagem aqui

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.

Paresh Mangukiya
fonte
0

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.

Yash
fonte