skip to Main Content

I am wondering if is there any efficient way to create a custom shape like this, where I can change the color of each segment?

enter image description here

2

Answers


  1. You can do this with CustomClipper like this:

    class CustomDraw2 extends CustomClipper<Path> {
      @override
      Path getClip(Size size) {
        var path = Path();
        path.moveTo(0, 0);
        path.cubicTo(
            0, 0, size.height * 0.3, 0, size.height * 0.4, size.height * 0.4);
        path.cubicTo(
          size.height * 0.4,
          size.height * 0.4,
          size.height * 0.4,
          size.height * 0.66,
          size.height * 0.9,
          size.height * 0.7,
        );
        path.cubicTo(
          size.height * 0.9,
          size.height * 0.7,
          size.height * 1.4,
          size.height * 0.7,
          size.height * 1.5,
          size.height,
        );
    
        path.lineTo(0, size.height);
        path.lineTo(0, 0);
    
        path.close();
        return path;
      }
    
      @override
      bool shouldReclip(CustomClipper<Path> oldClipper) {
        return false;
      }
    }
    

    and use it like this:

    Container(
        clipBehavior: Clip.antiAlias,
        margin: EdgeInsets.all(16),
        decoration: BoxDecoration(borderRadius: BorderRadius.circular(8)),
        child: Stack(
          children: [
            Container(
              height: 100,
              width: double.infinity,
              color: Colors.green,
            ),
            SizedBox(
              height: 100,
              width: 300,
              child: ClipPath(
                clipper: CustomDraw2(),
                child: Container(
                  color: Colors.blueAccent,
                ),
              ),
            ),
          ],
        ),
      )
    

    enter image description here

    Login or Signup to reply.
  2. The best thing you can use is Flutter Shape Maker

    Fun Fact: If you know some basics how to draw, it will be fun! It can generate the custom clipper code for you!

    Shape Maker Official Website

    Reference Video 1 (Basic and Old)

    Reference Video 2

    Reference Video 3

    Been using for some production based application, and working very nicely

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search