如何在Flutter中实现这样的设计？

Question

如何使用这些曲线在 Flutter 中进行此设计：https://i.stack.imgur.com/QMZrQ.png。我想知道我是否应该使用 clipath 或堆栈小部件。因为元素彼此重叠。这有点令人困惑，因为一方面白色小部件在背面，另一方面黑色小部件在白色

Answer 1

希望您指的是这个设计：

class _SingInScreenState extends State<SingInScreen> {
double height;
double width;
@override
Widget build(BuildContext context) {
  height = MediaQuery.of(context).size.height;
  width = MediaQuery.of(context).size.width;
  return Scaffold(
    body: Column(
      children: [
        Container(
          height: height * .4,
          decoration: BoxDecoration(
            color: Colors.black,
            borderRadius: BorderRadius.only(
              bottomRight: Radius.circular(50),
            ),
          ),
        ),
        Container(
          height: height * .6,
          color: Colors.black,
          child: Container(
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(50),
              ),
            ),
            height: height * .5,
          ),
        ),
      ],
    ),
  );
}

}

如何在Flutter中实现这样的设计？

How to achieve this kind of a design in Flutter?

flutter

user-interface

dart

mobile-application