expanded - flutter flexible

¿El equivalente de wrap_content y match_parent en flutter?

Question

En Android match_parent y wrap_content se 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, de forma predeterminada, todos los widgets están configurados para wrap_content , ¿cómo lo cambiaría de modo que pueda completar su width y height con el de su padre?

Answer 1

Para obtener el comportamiento de match_parent y wrap_content necesitamos usar la propiedad mainAxisSize en el widget Fila / Columna , la propiedad mainAxisSize toma la enumeración MainAxisSize con dos valores, que es MainAxisSize.min, que se comporta como wrap_content y MainAxisSize.max, que se comporta como match_parent .

Link del artículo original

Answer 2

La forma más sencilla de mecanizar a los padres es envolver el widget en el widget del Centro como este

child:
Center(child: Text(''Bla Bla Bla''),

Answer 3

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 para cada uno de sus hijos, como "puedes estar a la altura de esto, debes ser tan alto, debes ser al menos tan ancho", o lo que sea (específicamente, 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 coincida con esas restricciones. Luego, una vez que cada niño haya hecho lo suyo, el widget puede elegir su propio tamaño.

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

Algunos widgets les dicen a sus hijos que pueden ser del tamaño que quieran. Algunos les dan a sus hijos las mismas restricciones que obtuvieron de sus padres.

Answer 4

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.

Con un ListView, el botón obtiene un comportamiento match_parent y para obtener un comportamiento wrap_content puede envolverlo con un widget de 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 al hijo de una Fila, Columna o Flex la flexibilidad para expandirse para llenar el espacio disponible en el eje principal (por ejemplo, horizontalmente para una Fila o verticalmente para una Columna), pero, a diferencia de Expandido, Flexible no Requerir que el niño llene el espacio disponible. https://docs.flutter.io/flutter/widgets/Flexible-class.html

Answer 5

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

Answer 6

Una solución simple:

Si un contenedor solo tiene un elemento secundario de nivel superior, puede especificar la propiedad de alineación para el elemento secundario y asignarle cualquier valor disponible. Se llenará todo el espacio en el 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
   )
)