简体   繁体   中英

Custom Shape Issue Flutter

I'm trying to make custom shaped container in flutter, but i can't get symmetric version(symmetric to origin) of shape i made, 我需要得到对称的蓝色 ONE 在此处输入图像描述

class BackgroundClipper1 extends CustomClipper<Path> {
  @override
  getClip(Size size) {
    var path = Path();
    path.moveTo(0, 0);

    path.lineTo(size.width,0);
    path.lineTo(0,size.height); 
    return path;
  }

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

. . . How i call this in my code.

child: ClipPath(
                  clipper: BackgroundClipper1(),
                  child: Container(
                    width: MediaQuery.of(context).size.width,
                    height: MediaQuery.of(context).size.height * 0.5,
                    decoration: BoxDecoration(
                        gradient: LinearGradient(
                            colors: [Colors.blue, Colors.blueAccent])),
                  )),

Try this..

class MyTriangle extends CustomPainter {
  final Color strokeColor;

  MyTriangle({this.strokeColor = Colors.white});

  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..color = strokeColor
      ..style = PaintingStyle.fill;

    canvas.drawPath(getTrianglePath(size.width, size.height), paint);
  }

  Path getTrianglePath(double x, double y) {
    return Path()
      ..moveTo(y, 0)
      ..lineTo(y, x)
      ..lineTo(0, x)
      ..lineTo(y, 0);
  }

  @override
  bool shouldRepaint(MyTriangle oldDelegate) {
    return oldDelegate.strokeColor != strokeColor;
  }
}

and usage

Container(
        width: 150,
        height: 150,
        child: CustomPaint(painter: MyTriangle(strokeColor: Colors.green)),
      )

OUTPUT

在此处输入图像描述

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM