Flutter：如何防止按钮溢出父容器？

Question

我正在尝试创建一个在最底部有一个按钮的小部件。它应该是什么样子

但是，我的按钮底部超出了父容器，我不知道如何解决这个问题。

我的代码当前产生什么

这是我目前拥有的代码。我尝试过使用 Sizedbox，并对大小进行硬编码，但它仍然溢出父容器。

Widget build(BuildContext context) {
    return Container(
      width: MediaQuery.of(context).size.width,
      height: 210,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(20),
        color: Colors.blueGrey,
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 16),
            child: Image.asset(
              'assets/images/clock.png',
            ),
          ),
          Text(
            "You have no upcoming appointments",
            style: TextStyle(color: catCharlie),
          ),
          const SizedBox(
            height: 30,
          ),
          ElevatedButton(
            onPressed: () {},
            style: ButtonStyle(
              backgroundColor: MaterialStateProperty.all(cocoGypsy),
              shape: MaterialStateProperty.all(LinearBorder.none),
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(
                  'Schedule an appointment',
                  style: TextStyle(fontSize: 13, color: bishop),
                ),
                const Icon(
                  Icons.arrow_forward_ios,
                  size: 16,
                )
              ],
            ),
          )
        ],
      ),
    );
  }

Answer 1

您可以使用

Spacer

小部件强制将按钮推到底部。并在顶部容器上使用

clipBehavior: Clip.antiAlias

或

hardEdge

，默认为无。

Container(
  width: MediaQuery.of(context).size.width,
  height: 210,
  clipBehavior: Clip.antiAlias,
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(20),
    color: Colors.blueGrey,
  ),
  child: Column(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: [
      Padding(
        padding: const EdgeInsets.symmetric(vertical: 16),
        // child: Image.asset(
        //   'assets/images/clock.png',
        // ),
      ),
      Text(
        "You have no upcoming appointments",
        // style: TextStyle(color: catCharlie),
      ),
      // const SizedBox(
      //   height: 30,
      // ),
      Spacer(),
      ElevatedButton(
        onPressed: () {},
        style: ButtonStyle(
          backgroundColor: MaterialStateProperty.all(cocoGypsy),
          fixedSize: MaterialStateProperty.all(const Size.fromHeight(50)),
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text(
              'Schedule an appointment',
              style: TextStyle(fontSize: 13, color: bishop),
            ),
            const Icon(
              Icons.arrow_forward_ios,
              size: 16,
            )
          ],
        ),
      )
    ],
  ),
)