O equivalente a wrap_content e match_parent no flutter?

No Android match_parente wrap_contentsão usados ​​para redimensionar os widgets automaticamente em relação ao seu pai para o conteúdo que o widget contém.

No Flutter, parece que por padrão todos os widgets estão configurados para wrap_content, como eu mudaria para que eu pudesse preencher o seu widthe heighto de seu pai?

Você pode fazer com um pequeno truque: Suponha que você tenha o requisito de: (Largura, Altura)

Wrap_content, Wrap_content:

 //use this as child
 Wrap(
  children: <Widget>[*your_child*])

Match_parent, Match_parent:

 //use this as child
Container(
        height: double.infinity,
    width: double.infinity,child:*your_child*)

Match_parent, Wrap_content:

 //use this as child
Row(
  mainAxisSize: MainAxisSize.max,
  children: <Widget>[*your_child*],
);

Wrap_content, Match_parent:

 //use this as child
Column(
  mainAxisSize: MainAxisSize.max,
  children: <Widget>[your_child],
);

A fim de obter comportamento para match_parent e wrap_content precisamos usar mainAxisSize propriedade em Linha / Coluna widget, o mainAxisSize propriedade tem MainAxisSize enum ter dois valores que é MainAxisSize.min que se comporta como wrap_content e MainAxisSize.max que se comporta como match_parent .

Link do artigo original

A resposta curta é que o pai não tem um tamanho até que o filho tenha um tamanho.

A forma como o layout funciona no Flutter é que cada widget fornece restrições para cada um de seus filhos, como "você pode ter até esta largura, você deve ser desta altura, você deve ter pelo menos esta largura", ou qualquer outra coisa (especificamente, eles obter uma largura mínima, uma largura máxima, uma altura mínima e uma altura máxima). Cada criança pega essas restrições, faz algo e escolhe um tamanho (largura e altura) que corresponda a essas restrições. Então, uma vez que cada criança tenha feito seu trabalho, o widget pode escolher seu próprio tamanho.

Alguns widgets tentam ser tão grandes quanto os pais permitirem. Alguns widgets tentam ser tão pequenos quanto os pais permitirem. Alguns widgets tentam corresponder a um certo tamanho "natural" (por exemplo, texto, imagens).

Alguns widgets dizem aos filhos que eles podem ter o tamanho que quiserem. Alguns impõem aos filhos as mesmas restrições que receberam dos pais.

Na verdade, existem algumas opções disponíveis:

Você pode usar SizedBox.expand para fazer com que seu widget corresponda às dimensões pais ou SizedBox (largura: double.infinity) para corresponder apenas à largura ou SizedBox (heigth: double.infinity) para corresponder apenas à altura.

Se você deseja um comportamento wrap_content, ele depende do widget pai que você está usando, por exemplo, se você colocar um botão em uma coluna, ele se comportará como wrap_content e para usá-lo como match_parent você pode envolver o botão com um widget expandido ou uma caixa de tamanhos.

Com um ListView, o botão obtém um comportamento match_parent e para obter um comportamento wrap_content você pode envolvê-lo com um widget Flex como Row.

Usar um widget Expandido faz com que um filho de uma Linha, Coluna ou Flex se expanda para preencher o espaço disponível no eixo principal (por exemplo, horizontalmente para uma Linha ou verticalmente para uma Coluna). https://docs.flutter.io/flutter/widgets/Expanded-class.html

Usar um widget Flexível oferece ao filho de uma Linha, Coluna ou Flex a flexibilidade de expandir para preencher o espaço disponível no eixo principal (por exemplo, horizontalmente para uma Linha ou verticalmente para uma Coluna), mas, ao contrário de Expandido, Flexível não exigir que a criança preencha o espaço disponível. https://docs.flutter.io/flutter/widgets/Flexible-class.html

Uma solução simples:

Se um contêiner tiver apenas um filho de nível superior, você poderá especificar a propriedade de alinhamento para o filho e fornecer a ele qualquer valor disponível. ele preencherá todo o espaço do contêiner.

Container(color:Colors.white,height:200.0,width:200.0,
 child:Container(
    color: Colors.yellow,
    alignment:Alignment.[any_available_option] // make the yellow child match the parent size
   )
)

Outra maneira:

Container(color:Colors.white,height:200.0,width:200.0,
 child:Container(
    color: Colors.yellow,
    constraints:  BoxConstraints.expand(height: 100.0), // height will be 100 dip and width will be match parent
   )
)

Usei esta solução, você tem que definir a altura e largura da sua tela usando o MediaQuery:

 Container(
        height: MediaQuery.of(context).size.height,
        width: MediaQuery.of(context).size.width
  )

Stack(
  children: [
    Container(color:Colors.red, height:200.0, width:200.0),
    Positioned.fill(
      child: Container(color: Colors. yellow),
    )
  ]
),

Use o widget Wrap.

Para Column comportamento semelhante, tente:

  return Wrap(
          direction: Axis.vertical,
          spacing: 10,
          children: <Widget>[...],);

Para Row comportamento semelhante, tente:

  return Wrap(
          direction: Axis.horizontal,
          spacing: 10,
          children: <Widget>[...],);

Para mais informações: Wrap (Flutter Widget)

Use esta linha de códigos dentro da coluna. Para wrap_content: mainAxisSize: MainAxisSize.min Para match_parent:mainAxisSize: MainAxisSize.max

Na verdade, existe uma maneira muito fácil e simples de fazer isso.

Use o FractionallySizedBoxwidget.

FractionallySizedBox(
  widthFactor: 1.0, // width w.r.t to parent
  heightFactor: 1.0,  // height w.r.t to parent
  child: *Your Child Here*
}

Este widget também é muito útil quando você deseja dimensionar seu filho em uma fração do tamanho de seu pai.

Exemplo:

Se você quiser que o filho ocupe 50% da largura de seu pai, forneça widthFactorcomo0.5

Para fazer um filho preencher seu pai, basta envolvê-lo em um FittedBox

    FittedBox(
     child: Image.asset('foo.png'),
     fit: BoxFit.fill,
   )