android - 如何在 Flutter 中创建这种形状？

Question

请任何人都可以帮我在手机屏幕的右上角创建这种形状：

提前致谢。

标签： androidiosflutterdart

Answer 1

您可以使用 Stack 小部件，并将其作为其子元素的 Positioned 小部件，其中包含一个带有圆圈的容器，之后您可以将圆圈推出屏幕，以便只渲染它的一部分

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: MyApp._title,
      home: Scaffold(
          body: Column(
        children: [
          CircleCorner(),
        ],
      )),
    );
  }
}

class CircleCorner extends StatelessWidget {
  const CircleCorner({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return SizedBox(
      width: size.width,
      height: 300,
      child: Stack(
        children: [
          Positioned(
            top: -460,
            right: -380,
            child: Container(
               width: 600.0,
               height: 600.0,
              decoration: new BoxDecoration(
                color: Colors.black87,
                shape: BoxShape.circle,
              ),
            ),
          ),
        ],
      ),
    );
  }
}