我想在flutter中使用customPainter创建以下应用程序设计

Question

我想创建如下所示的 appBar，但我对 customPainter 不太了解。 应该像下面的设计。 我已附上图片 无法在颤振中使用三次曲线和贝泽曲线来做到这一点。

void 油漆（Canvas 画布，Size 尺寸）{ 最终油漆 = Paint() ..颜色=颜色.红色 ..style = PaintingStyle.fill ..笔画宽度= 4.0;

final path = Path();
path.moveTo(0, 0);
path.lineTo(size.width, 0);
path.lineTo(size.width, size.height);
path.lineTo(size.width-30, size.height);
// path.cubicTo(size.width-10, size.height,
// size.width-60, size.height+20,
// size.width-60, size.height-10
// );
path.relativeCubicTo(size.width-40,
 100,
size.width-60, 10,
size.width-60,0
);
path.lineTo(0, size.height);


canvas.drawPath(path, paint);

Answer 1

尝试以下版本的

ClipPath

。

这是剪刀：

class AppBarClipper extends CustomClipper<Path>{
  @override
  Path getClip(Size size) {
   
   Path path = Path();
   double w = size.width;
   double h = size.height;
   double amountToClip = w /10;
   path.lineTo(w,0);
   path.lineTo(w,h);
   path.lineTo(w - amountToClip , h );
   path.quadraticBezierTo(w-1.25 * amountToClip, h-.5*amountToClip,  w- 1.5 * amountToClip , h -amountToClip / 2);
   path.lineTo(1.5 * amountToClip, h - amountToClip / 2);
   path.quadraticBezierTo(1.25 * amountToClip, h-.5*amountToClip , amountToClip , h);
   path.lineTo(0 , h);
   path.lineTo(0,0);
   return path;
  }

  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) =>true;
}

这是应用剪辑路径后的小部件：

ClipPath(
   clipper: AppBarClipper(),
   child: Container(
           width: double.infinity,
           height: 80,
           color: Colors.red,
           ),
          ),

当然，您可以定制该路径以满足您的需求。