Может ли кто-нибудь помочь мне сгладить мой код флаттера? - PullRequest
Новая
       53

Может ли кто-нибудь помочь мне сгладить мой код флаттера?

1 голос
/ 06 мая 2020

Я новичок в Flutter и Clippaths в целом, но я пытаюсь сложить две волны Flutter clippath, и моя вторая волна выглядит прерывистой, независимо от того, насколько я настраиваю элемент управления или конечные точки. Может ли кто-нибудь дать мне некоторое представление? Я прочитал бесконечное количество руководств и не могу понять, чего мне не хватает. Также я хотел бы увеличить общую высоту волн, чтобы покрыть большую часть 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;
  }
}
...