如何在Flutter中获得这样的UI？

Question

我希望在纯背景上有一张类似Container的卡片，如图所示。

这是我尝试使用Stack的尝试，但是我无法将其放置在正确的位置。

我是新手，很抱歉提出这样一个愚蠢的问题。

  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          Container(
            color: Colors.grey,
          ),
          Positioned(
              child: Container(
            color: Colors.white,
            height: 400,
          ))
        ],
      ),
    );
  }

Answer 1

使用Positioned.fill作为其子元素的Align，并以Alignment.bottomCenter对齐。 然后，您可以装饰堆叠的Container以获得边界半径。

Widget build(BuildContext context) {
  return Scaffold(
    body: Stack(
      children: <Widget>[
        Container(
          color: Colors.grey,
        ),
        Positioned.fill(
          child: Align(
            alignment: Alignment.bottomCenter,
            child: Container(
              decoration: BoxDecoration(
                borderRadius: BorderRadius.only(
                  topRight: Radius.circular(30),
                  topLeft: Radius.circular(30),
                ),
                color: Colors.white,
              ),
              height: 400,
            ),
          ),
        )
      ],
    ),
  );
}