如何在 Flutter 的灵活小部件中使用 flex 参数？

Question

When there is excess space between widgets, the flex property works as expected. As mentioned in the documentation, the formula to use is as follows

remainingSpace * (flex / totalOfAllFlexValues)

But when you have to shrink the widgets, the flex property stops making sense. Giving results like this.

Building on this, here the widgets overflow, so I use flex to shrink box 1 and 2

and while playing with the flex values, the following happens

class Caja extends StatelessWidget {

  Color color;
  int numero;
  double ancho;

  Caja(this.color, this.numero, this.ancho);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: this.ancho,
      height: this.ancho,
      color: this.color,
      child: Center(
        child: Text(
          this.numero.toString(),
          style: TextStyle(
            fontSize: 30.0
          ),
        ),
      ),
    );
  }
}

I user Flexible widget below

 Column(
      crossAxisAlignment: CrossAxisAlignment.start,

      children: <Widget>[
          Flexible(flex: 1, child: Caja(Colors.blue, 1, 200.0)),

          Flexible(flex: 6, child: Caja(Colors.red, 2, 200.0)),

          Caja(Colors.green, 4, 400.0),
      ],
 )

Where does this new leftover space come from? Can someone explain to me?

Answer 1

I changed the flex value of the second box to 1 - there was no white space. Then to 2 - there was no white space either. From a flex value of 3 upwards, there appears a white space and it gets bigger and bigger. The documentation states, that a

"..., Flexible does not require the child to fill the available space."

If you examine the source code of the Flexible, the comments say:

"If non-zero, the amount of space the child's can occupy in the main axis is determined by dividing the free space (after placing the inflexible children) according to the flex factors of the flexible children."

I think there might be a problem with the inflexible child - your green box. If you set the flex of your second box so high, you want your first box to be really small. But the flexible children just take the free space up to the inflexible child into consideration and not the free space after it.