Search code examples
flutterdartcontainersdrawshapes

how to draw this shape with flutter


I have a chat page, in the messages I need to draw a custom shape so how to draw this shape with flutter, ignore the purple color it's from screen shot

Container(
  height: 0.1*MediaQuery.of(context).size.height,
  color: Color(0xffFFC20F),
  child: Text('some thing'),
)

row


Solution

  • I think this should help you. You can modify the values according to your need.

    class CustomClip extends CustomClipper<Path>{
      @override
      Path getClip(Size size){
        Path path = Path();
        path.moveTo(10,0);
        path.lineTo(10,size.height/2 - 10);
        path.lineTo(0,size.height/2);
        path.lineTo(10,size.height/2 + 10);
        path.lineTo(10,size.height);
        path.lineTo(size.width,size.height);
        path.lineTo(size.width,0);
        path.close();
        return path;
      }
    
      @override
      bool shouldReclip(CustomClipper clipper){
        return false;
      } 
    }
    

    Then you can use it in your code as

    ClipPath(
      clipper:CustomClip(),
      child:Container(width:300,height:100,color:Colors.yellow),
    );