Flutter 自定义裁剪器

Question

我正在尝试使用自定义剪裁器。我正在尝试绘制这个弯曲的蓝色容器。不知何故，我似乎无法弄清楚（目前是菜鸟）。我可以帮助自定义裁剪器路径的代码 sn-p 吗？很可能我写错了路径。

图片如下：

Answer 1

使用 custompaint 类

class _MyHomePageState extends State<MyHomePage>  {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: CustomPaint(
          painter: BackgroundPaint(),
          child: Container(
            child: Center(
              child: Text("hello"),
            ),
          ),
        ),
        backgroundColor: Colors.blue,
      ),
    );
  }
}

class BackgroundPaint extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint();
    Path path = Path();
    paint.color = Colors.white;
    path.lineTo(0, size.height *0.3);
    path.quadraticBezierTo(size.width*0.70, size.height*0.60, size.width*1.2, 0);
    path.close();
    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return oldDelegate != this;
  }
}