¿El equivalente de wrap_content y match_parent en flutter?

En Android match_parenty wrap_contentse utilizan para cambiar el tamaño de los widgets automáticamente en relación con su padre al contenido que contiene el widget.

En Flutter, parece que todos los widgets están configurados de wrap_contentforma predeterminada , ¿cómo lo cambiaría para poder completar el suyo widthy heightel de su padre?

Puede hacerlo con un pequeño truco: suponga que tiene requisitos de: (Ancho, Alto)

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

Con el fin de obtener un comportamiento de match_parent y wrap_content tenemos que utilizar mainAxisSize propiedad en fila / columna widget, el mainAxisSize propiedad toma MainAxisSize enumeración tener dos valores, que es MainAxisSize.min que se comporta como wrap_content y MainAxisSize.max que se comporta como match_parent .

Enlace del artículo original

La respuesta corta es que el padre no tiene un tamaño hasta que el niño tiene un tamaño.

La forma en que funciona el diseño en Flutter es que cada widget proporciona restricciones a cada uno de sus elementos secundarios, como "puedes tener este ancho, debes ser tan alto, debes tener al menos este ancho", o lo que sea (específicamente, ellos obtener un ancho mínimo, un ancho máximo, una altura mínima y una altura máxima). Cada niño toma esas restricciones, hace algo y elige un tamaño (ancho y alto) que coincide con esas restricciones. Luego, una vez que cada niño ha hecho lo suyo, el widget puede elegir su propio tamaño.

Algunos widgets intentan ser tan grandes como lo permiten los padres. Algunos widgets intentan ser tan pequeños como lo permiten los padres. Algunos widgets intentan coincidir con un cierto tamaño "natural" (por ejemplo, texto, imágenes).

Algunos widgets les dicen a sus hijos que pueden tener el tamaño que deseen. Algunos les dan a sus hijos las mismas limitaciones que les dieron sus padres.

En realidad, hay algunas opciones disponibles:

Puede usar SizedBox.expand para hacer que su widget coincida con las dimensiones de los padres, o SizedBox (ancho: double.infinity) para que coincida solo con el ancho o SizedBox (heigth: double.infinity) para que coincida solo con la altura.

Si desea un comportamiento de wrap_content, depende del widget principal que esté utilizando, por ejemplo, si coloca un botón en una columna, se comportará como wrap_content y, para usarlo como match_parent, puede envolver el botón con un widget expandido o una caja de tamaño.

Con ListView, el botón obtiene un comportamiento match_parent y para obtener un comportamiento wrap_content, puede envolverlo con un widget Flex como Row.

El uso de un widget expandido hace que un elemento secundario de una fila, columna o flex se expanda para llenar el espacio disponible en el eje principal (por ejemplo, horizontalmente para una fila o verticalmente para una columna). https://docs.flutter.io/flutter/widgets/Expanded-class.html

El uso de un widget flexible le da a un hijo de una fila, columna o flex la flexibilidad de expandirse para llenar el espacio disponible en el eje principal (p. Ej., Horizontalmente para una fila o verticalmente para una columna), pero, a diferencia de Expandido, Flexible no lo hace. requiera que el niño llene el espacio disponible. https://docs.flutter.io/flutter/widgets/Flexible-class.html

Una solución sencilla:

Si un contenedor tiene solo un hijo de nivel superior, puede especificar la propiedad de alineación para el hijo y darle cualquier valor disponible. llenará todo el espacio del contenedor.

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

De otra manera:

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

Usé esta solución, debes definir la altura y el ancho de tu pantalla usando 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),
    )
  ]
),

Usa el widget Wrap.

Para Columnun comportamiento similar, intente:

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

Para Rowun comportamiento similar, intente:

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

Para obtener más información: Wrap (Flutter Widget)

Utilice esta línea de códigos dentro de la columna. Para wrap_content: mainAxisSize: MainAxisSize.min para match_parent:mainAxisSize: MainAxisSize.max

En realidad, existe una forma muy sencilla y ordenada de hacer esto.

Utilice el 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 también es muy útil cuando desea ajustar el tamaño de su hijo a una fracción del tamaño de su padre.

Ejemplo:

Si desea que el niño ocupe el 50% del ancho de su padre, proporcione widthFactorcomo0.5

Para hacer que un niño complete su padre, simplemente envuélvalo en un FittedBox

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