Flutter Question posted in
The official Flutter documentation can be found here.

Flutter make Clipper Path

I want to use the Flutter Custom Clipper to create a shape like the picture below, but it doesn’t work. Is there anyone who can help?

enter image description here

class MyCustomClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    List<Offset> polygon = [
      Offset(0, 10),
      Offset(size.width - 30, 10),
      Offset(size.width - 25, 0),
      Offset(size.width - 20, 10),
      Offset(size.width, 10),
      Offset(size.width, size.height),
      Offset(0, size.height),
      Offset(0, 10),
    ];

    Path path = Path()
      ..addPolygon(polygon, false)
      ..close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {
    return true;
  }
}
[Svg code] 
<svg width="132" height="110" viewBox="0 0 132 110" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M111.858 1.73511L111.434 1.05619L111.01 1.73512L107.096 8H5.997C2.96081 8 0.5 10.4627 0.5 13.5V103.5C0.5 106.537 2.96081 109 5.997 109H125.925C128.961 109 131.422 106.537 131.422 103.5V13.5C131.422 10.4627 128.961 8 125.925 8H115.771L111.858 1.73511Z" fill="white" stroke="#EAECEE"/>
</svg>

Actually, I used this path through polygon, but I couldn’t give it a border, so I guess I don’t know much.

Tags:

2

Answers


  1. 0

    You can use this code belo

    import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        home: Scaffold(
          body: Center(
            child: CustomPaint(
              painter: MyPainter(),
              child: Container(
                  height: 300,
                width:400,
                  padding:
                      EdgeInsets.only(left: 15, right: 15, bottom: 20, top: 20),
                  child: Center(
                    child:
                        Text("Some content",
                            style: TextStyle(
                              color: Colors.black,
                            )),
                  )),
            ),
          ),
        ));
  }
}

class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint();
    Paint stroke = Paint()
      ..style = PaintingStyle.stroke
      ..strokeWidth = 6.0
      ..color = Colors.green;
    Path path = Path();

    // Path number 1

    paint.color = Color(0x3d3ded).withOpacity(1);
    path = Path();
    path.moveTo(size.width * 0.14, size.height * 0.11);
    path.cubicTo(size.width * 0.14, size.height * 0.11, size.width * 0.05,
        size.height * 0.11, size.width * 0.05, size.height * 0.11);
    path.cubicTo(size.width * 0.01, size.height * 0.11, 0, size.height * 0.16,
        0, size.height * 0.19);
    path.cubicTo(
        0, size.height * 0.19, 0, size.height * 0.9, 0, size.height * 0.9);
    path.cubicTo(0, size.height, size.width * 0.04, size.height,
        size.width * 0.06, size.height);
    path.cubicTo(size.width * 0.06, size.height, size.width * 0.94, size.height,
        size.width * 0.94, size.height);
    path.cubicTo(size.width, size.height, size.width, size.height * 0.93,
        size.width, size.height * 0.9);
    path.cubicTo(size.width, size.height * 0.9, size.width, size.height * 0.19,
        size.width, size.height * 0.19);
    path.cubicTo(size.width, size.height * 0.11, size.width * 0.96,
        size.height * 0.1, size.width * 0.94, size.height * 0.11);
    path.cubicTo(size.width * 0.94, size.height * 0.11, size.width * 0.27,
        size.height * 0.11, size.width * 0.27, size.height * 0.11);
    path.cubicTo(size.width * 0.27, size.height * 0.11, size.width / 5, 0,
        size.width / 5, 0);
    path.cubicTo(size.width / 5, 0, size.width * 0.14, size.height * 0.11,
        size.width * 0.14, size.height * 0.11);
    path.cubicTo(size.width * 0.14, size.height * 0.11, size.width * 0.14,
        size.height * 0.11, size.width * 0.14, size.height * 0.11);
    canvas.drawPath(path, paint);
    canvas.drawPath(path, stroke);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

    custom shape

    you may have to create a paint for stroke and paint it twice as shown at the end of this code

    Login or Signup to reply.
  2. 0

    Try this

    class MyCustomClipper extends CustomPainter {
    @override
    void paint(Canvas canvas, Size size) {
            
Path path_0 = Path();
    path_0.moveTo(111.858,1.73511);
    path_0.lineTo(111.434,1.05619);
    path_0.lineTo(111.01,1.73512);
    path_0.lineTo(107.096,8);
    path_0.lineTo(5.997,8);
    path_0.cubicTo(2.96081,8,0.5,10.4627,0.5,13.5);
    path_0.lineTo(0.5,103.5);
    path_0.cubicTo(0.5,106.537,2.96081,109,5.997,109);
    path_0.lineTo(125.925,109);
    path_0.cubicTo(128.961,109,131.422,106.537,131.422,103.5);
    path_0.lineTo(131.422,13.5);
    path_0.cubicTo(131.422,10.4627,128.961,8,125.925,8);
    path_0.lineTo(115.771,8);
    path_0.lineTo(111.858,1.73511);
    path_0.close();

Paint paint_0_stroke = Paint()..style=PaintingStyle.stroke..strokeWidth=2;
paint_0_stroke.color=Color(0xffEAECEE).withOpacity(1.0);
canvas.drawPath(path_0,paint_0_stroke);

Paint paint_0_fill = Paint()..style=PaintingStyle.fill;
paint_0_fill.color = Colors.white.withOpacity(1.0);
canvas.drawPath(path_0,paint_0_fill);

    using Flutter Shape Maker you can create CustomPainter code from any svg.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search