I have a layout where there are two children in a Row widget, both of which are flexible widgets. The left side widget contains both red and blue colored widgets, and I want to increase the height of the blue color widget based on the height of the right side widget (which is a flexible widget with a flex value of 7).

我有一个布局，其中Row小部件中有两个子部件，这两个都是灵活的小部件。左侧的小部件包含红色和蓝色的小部件，我希望根据右侧小部件的高度增加蓝色小部件的高度(这是一个灵活的小部件，其FLEX值为7)。

Ex1: The height of the blue color widget to be dynamically adjusted based on the height of the right side widget (with a flex value of 7).

例1：根据右侧小工具的高度动态调整蓝色小工具的高度(伸缩值为7)。

Ex2: left side's height = right side's height

例2：左侧的高度=右侧的高度

body: Column(
  children: [
    Container(color: Colors.green, height: 40),
    Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Flexible(
          flex: 3,
          child: Stack(
            alignment: AlignmentDirectional.center,
            children: [
              Column(
                children: [
                  Container(
                    color: Colors.red,
                    height: 20,
                  ),
                  Container(
                    color: Colors.blue,
                    height: 50, // I want to dynamically adjust this height
                  ),
                ],
              ),
            ],
          ),
        ),
        Flexible(
          flex: 7,
          child: Container(
            color: Colors.yellow,
            child: Column(
              children: [1, 2, 3]
                .map((e) => ListTile(
                  title: Text('testing - $e'),
                ))
                .toList(),
            ),
          ),
        ),
      ],
    ),
    Container(color: Colors.grey, height: 50),
  ],
),

I tried this solution it's working, but I have to rebuild the page after the right side of the widget build. Otherwise, the blue color widget is not visible initially.

我尝试了这个解决方案，它是有效的，但我必须在小部件构建的右侧之后重新构建页面。否则，蓝色小部件最初不可见。

  final rightFlexibleKey = GlobalKey();

// Get the render box
  RenderBox? get rightBox => rightFlexibleKey.currentContext?.findRenderObject() as RenderBox?;

// Calculate blue height
  double get blueHeight {
    if (rightBox != null) {
      return rightBox!.size.height - 20;
    }
    return 0;
  }

Maybe you'll need IntrinsicHeight.

也许你会需要IntrinsicHeight。

This widget helps its children adjusting their height dependently.
But keep in mind IntrinsicHeight is expensive widget.

这个小工具帮助它的孩子们独立地调整他们的身高。但请记住，IntrinsicHeight是一款昂贵的小工具。

Column(
      children: [
        Container(color: Colors.green, height: 40),
        IntrinsicHeight(
          child: Row(
            children: [
              Flexible(
                flex: 3,
                child: Column(
                  children: [
                    Flexible(
                      child: Stack( // I don't know why you need Stack here. If you don't need, we can remove Column -> Flexible -> Stack 
                        children: [
                          Column(
                            children: [
                              Container(
                                color: Colors.red,
                                height: 20,
                              ),
                              Flexible(
                                child: Container(
                                  color: Colors.blue,
                                ),
                              ),
                            ],
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
              Flexible(
                flex: 7,
                child: Container(
                  color: Colors.yellow,
                  child: Column(
                    children: [1, 2, 3]
                        .map((e) => ListTile(
                      title: Text('testing - $e'),
                    ))
                        .toList(),
                  ),
                ),
              ),
            ],
          ),
        ),
        Container(color: Colors.grey, height: 50),
      ],
    )