Flutter: expandido vs flexible

He usado ambos Expandedy Flexiblewidgets y que parecen funcionar misma. ¿Hay alguna diferencia entre los dos que me perdí?

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

Expanded es solo una abreviatura de Flexible

Usando expandido de esta manera:

Expanded(
  child: Foo(),
);

es estrictamente equivalente a:

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

Es posible que desee utilizar Flexibleover Expandedcuando desee un fitdiseño diferente , útil en algunos diseños receptivos.

La diferencia entre FlexFit.tighty FlexFit.loosees que suelta permitirá que su hijo tenga un tamaño máximo, mientras que la tensión lo fuerza a llenar todo el espacio disponible.

Los widgets de Flexible son WRAP_CONTENT predeterminados, aunque puede cambiarlos mediante el parámetro Ajustar.

El widget en Expandido es MATCH_PARENT , puede cambiarlo usando flex .

Expanded- es Flexiblecon ajuste fijo

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

Puede usar Flexible para cambiar el tamaño de los widgets en filas y columnas . Se utiliza principalmente para ajustar el espacio de los diferentes widgets secundarios manteniendo la relación con sus widgets principales.

Mientras tanto, Expanded cambia las restricciones enviadas a los hijos de filas y columnas ; ayuda a llenar los espacios disponibles allí. Por lo tanto, cuando envuelve a su hijo en un widget expandido, llena los espacios vacíos.

Proporcionar estos videos del canal oficial de YouTube de Flutter solo para ayudar a las personas, que podrían buscar esto en el futuro próximo ...

1. Expandido:

2. Flexible:

Expanded () no es más que Flexible () con

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

pero, usos flexibles fit :FlexFit.loosepor defecto.

FlexFit.tight = Quiere ajustarse bien al padre ocupando tanto espacio como sea posible.

FlexFit.loose = Quiere encajar suelto en el padre ocupando el menor espacio posible para sí mismo.

La única diferencia si usa en Flexiblelugar de Expanded, es que Flexiblepermite que su hijo tenga el mismo ancho o menor que el Flexiblemismo, mientras que Expandedobliga a su hijo a tener exactamente el mismo ancho de Expanded. Pero ambos Expandede Flexibleignoran el ancho de sus hijos cuando se dimensionan.

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

Nota : esto significa que es imposible expandir los Rowniños proporcionalmente a sus tamaños. La fila usa el ancho exacto del niño o lo ignora por completo cuando usa Expandedo Flexible.