Flutter：使按钮拉伸

Question

我正在构建的 Flutter Widget 树有问题：

我希望底部的按钮更大，并填充从上方文本到屏幕底部的所有可用空间。

这是我当前的代码：

class Body extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return SafeArea(
      child: Column(
        children: [
          UpperDetailsContainer(),
          TitleAndPrice(),
          //The Row below contains the Two Buttons
          Expanded(
            child: Row(
              children: [
                Container(
                  width: size.width / 2,
                  child: TextButton(
                    child: Text("Buy Now"),
                    style: TextButton.styleFrom(
                      backgroundColor: kPrimaryColor,
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.only(
                          topRight: Radius.circular(50)
                        )
                      )
                    ),
                  ),
                ),
                Container(
                  width: size.width / 2,
                  child: TextButton(
                    child: Text("Description"),
                    style: TextButton.styleFrom(
                        backgroundColor: kPrimaryColor,
                        shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.only(
                                topLeft: Radius.circular(50)
                            )
                        )
                    ),
                  ),
                ),
              ],
            ),
          )
        ],

      ),
    );
  }
}

我已经试过了：

• 使上部小部件更小
• 将 Mainaxisaligment.spacebetween 添加到周围的列
• 向包含按钮的行添加 Crossaxisaligment.stretch
• 整体移除 SafeArea 底部/SafeArea
• 手动将按钮的高度设置为绝对值，但出于明显的原因，我真的不想这样做

我还能做什么？那条灰底条纹是从哪里来的呢？

Answer 1

将crossAxisAlignment: CrossAxisAlignment.stretch 添加到该行，使其填充所有可用的垂直空间

注意：您需要 Expanded 小部件，以便您的行获得的约束不是无限的

@override
Widget build(BuildContext context) {
  Size size = MediaQuery.of(context).size;
  return SafeArea(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        SizedBox(
          height: size.height * 0.7,
          child: Container(
            color: Colors.amber,
          ),
        ),
        Expanded(
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              _buildBuyNowButton(size),
              _buildDescriptionButton(size),
            ],
          ),
        )
      ],
    ),
  );
}

可运行示例：https://www.dartpad.dev/4f568d8e0a334d23e7211207081356b4?null_safety=true