如何在flutter中实现这个标记部分？

Question

我学习 flutter 有几个月了，我在这种类型的 ui 设计中苦苦挣扎。你能帮我实现这种设计吗？ 我尝试过使用堆栈，但它不起作用。 如何让容器漂浮在容器中？

Answer 1

在代码中尝试像下面这样的堆栈。

Stack(alignment: Alignment.topCenter, children: [
          Container(
            height: MediaQuery.of(context).size.height,
            color: Colors.pinkAccent,
            child: Align(
              alignment: Alignment.topCenter,
              child: Container(
                height: MediaQuery.of(context).size.height / 2.5,
                color: Colors.orange,
              ),
            ),
          ),
          Container(
            decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.only(topRight: Radius.circular(50), topLeft: Radius.circular(5))),
            margin: EdgeInsets.only(top: MediaQuery.of(context).size.height / 3.5),
            width: 100,
            height: 100,
          ),
    ])