Flutter：让按钮伸展

Question

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

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

这是我当前的代码：

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 添加到该行，以便它填充所有可用的垂直 space

注意：您需要 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

Flutter：让按钮伸展

Flutter: Make Buttons stretch

widget

dart

flutter

flutter-layout