flutter - 有人可以帮助我平滑我的颤振剪辑路径代码吗？

Question

一般来说，我对 Flutter 和 Clippaths 很陌生，但我正在尝试堆叠两个 Flutter 剪贴路径波，无论我调整多少控制或端点，我的第二波看起来都不稳定。谁能给我一些见解？我已经阅读了无数的教程，但无法弄清楚我错过了什么。我还想增加波浪的整体高度以覆盖更多的 appBar。在此先感谢您的帮助！

class TruckScreen extends StatefulWidget {
  static const String id = 'vancomycin';
  @override
  _truckScreenState createState() => _TruckScreenState();
}

class _truckScreenState extends State<TruckScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Stack(
          children: <Widget>[
            ClipPath(
              clipper: BlueClipper(),
              child: Container(
                color: Colors.lightGreenAccent,
              ),
            ),
            ClipPath(
              clipper: GreenClipper(),
              child: Container(
                color: Colors.lightBlueAccent,
              ),
            ),
            AppBar(
              leading: null,
              actions: <Widget>[
                IconButton(
                    icon: Icon(Icons.close),
                    onPressed: () {
                      Navigator.pop(context);
                    }),
              ],
              title: Text('Help'),
              backgroundColor: Colors.transparent,
              elevation: 0.0,
            ),
          ],
        ),
      ),
    );
  }
}

class GreenClipper extends CustomClipper<Path> {
  @override
  getClip(Size size) {
    var path = new Path();
    path.lineTo(0, size.height / 7.25);
    var firstControlPoint = new Offset(size.width / 3, size.height / 4);
    var firstEndPoint = new Offset(size.width / 1.75, size.height / 10);
    var secondControlPoint = new Offset(size.width / 1.5, size.height / 30);
    var secondEndPoint = new Offset(size.width / 1.25, size.height / 30);
    var thirdControlPoint =
        new Offset(size.width - (size.width / 10), size.height / 30);
    var thirdEndPoint = new Offset(size.width, size.height / 12);

    path.quadraticBezierTo(firstControlPoint.dx, firstControlPoint.dy,
        firstEndPoint.dx, firstEndPoint.dy);
    path.quadraticBezierTo(secondControlPoint.dx, secondControlPoint.dy,
        secondEndPoint.dx, secondEndPoint.dy);
    path.quadraticBezierTo(thirdControlPoint.dx, thirdControlPoint.dy,
        thirdEndPoint.dx, thirdEndPoint.dy);
    path.lineTo(size.width, 0);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper oldClipper) {
    return null;
  }
}

class BlueClipper extends CustomClipper<Path> {
  @override
  getClip(Size size) {
    var path = new Path();
    path.lineTo(0, size.height / 7);
    var firstControlPoint = new Offset(size.width / 3, size.height / 3.25);
    var firstEndPoint = new Offset(size.width / 1.75, size.height / 6);
    var secondControlPoint = new Offset(size.width / 1.5, size.height / 9);
    var secondEndPoint = new Offset(size.width / 1.20, size.height / 12);
    var thirdControlPoint =
        new Offset(size.width - (size.width / 10), size.height / 12);
    var thirdEndPoint = new Offset(size.width, size.height / 10);

    path.quadraticBezierTo(firstControlPoint.dx, firstControlPoint.dy,
        firstEndPoint.dx, firstEndPoint.dy);
    path.quadraticBezierTo(secondControlPoint.dx, secondControlPoint.dy,
        secondEndPoint.dx, secondEndPoint.dy);
    path.quadraticBezierTo(thirdControlPoint.dx, thirdControlPoint.dy,
        thirdEndPoint.dx, thirdEndPoint.dy);
    path.lineTo(size.width, 0);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper oldClipper) {
    return null;
  }
}

标签： flutterclip-path