The drag effect of Flutter is implemented by custom view. The effect of Flutter is as follows

  1. To achieve the final effect, first draw the line (long rectangle) at the drag joint.
  2. In order to keep the width of the rectangle unchanged, the dynamic coordinates of the four points of the rectangle are calculated.
  3. With the Path connection, replace the top and bottom sides with bezier curves.
  4. Finally draw circles on both sides and hide the sharp corners of the rectangle.
var angleA = atan((during.dx - end.dx) / (end.dy - during.dy)); var temp_dx = cos(angleA) * lineWidth; var temp_dy = sin(angleA) * lineWidth; var firstControlPoint = Offset(end.dx + (during.dx - end.dx) / 2, during.dy + (end.dy - during.dy) / 2); var firstPoint = Offset(during.dx + temp_dx, during.dy + temp_dy); var secondPoint = Offset(end.dx - temp_dx * ratio, end.dy - temp_dy * ratio); / * * p1 p3 | -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - | | | | | | -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - | p2 p4 * / / / origin - > p1 path. The moveTo (end. Dx - temp_dx * ratio, end.dy - temp_dy * ratio); // p1 -> p2 path.lineTo(end.dx + temp_dx * ratio, end.dy + temp_dy * ratio); // p2 -> p4 path.quadraticBezierTo(firstControlPoint.dx, firstControlPoint.dy, firstPoint.dx, firstPoint.dy); // p4 -> p3 path.lineTo(during.dx - temp_dx, during.dy - temp_dy); // p3 -> p1 path.quadraticBezierTo(firstControlPoint.dx, firstControlPoint.dy, secondPoint.dx, secondPoint.dy); canvas.drawPath(path, paint); canvas.drawCircle(end, lineWidth * ratio, paint); canvas.drawCircle(during, lineWidth, paint);Copy the code

If you have any questions, please leave a comment.

Demo download