如何用 flutter 绘制这个形状

Question

我有一个聊天页面，我需要在消息中绘制自定义形状那么如何用颤动绘制这个形状，忽略屏幕截图中的紫色

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

Answer 1

我想这对你应该有帮助。您可以根据需要修改这些值。

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;
  } 
}

然后你可以在你的代码中使用它作为

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

如何用 flutter 绘制这个形状

how to draw this shape with flutter

containers

shapes

draw

dart

flutter