动态将小部件的底部设置为另一个小部件的中间

Question

橙色小部件必须从视图的顶部开始，并在按钮的中心结束，如图所示。挑战在于，它将基于手机屏幕是动态的。

我尝试动态地组合按钮的位置并增加按钮高度的一半，然后在initState（）上设置橙色宽度的高度，但这在需要时不会更改高度，在需要时仍为null 。 但是，认为必须有一种更简单的方法来执行此操作，仅使用布局小部件，我什么都没想到，请提供帮助。

Answer 1

您可以尝试使用Stack()

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //set the value you need for the height of your button
    final double buttonHeight = 20;

    //again you can use whatever size you want
    final double orangeWidgetHeight = MediaQuery.of(context).size.height * 0.5;
    return SizedBox(
      //leaves some space below the orangeWidget
      height: orangeWidgetHeight + (buttonHeight / 2.0),

      child: Stack(
        children: <Widget>[
          MyOrangeWidget(),
          Align(
            alignment: Alignment.bottomCenter,
            child: MyButton(),
          )
        ],
      ),
    );
  }
}