Flutter CustomPainter Path bugs on IOS when having negative x value

Question

I have a flutter bottom nav bar that works just fine on Android. but, when testing the same code on IOS, only when the first item is selected, the shadow of the navbar shifts to the left

Abnormal Behaviour Normal Behaviour

The problem is that the white navbar and the shadow have the exact same path :

void paint(Canvas canvas, Size size) {
    // Add shadow
    final shadowPaint = Paint()
      ..color = AppColors.black
      ..maskFilter = MaskFilter.blur(BlurStyle.normal, 5);

    // Main path
    final paint = Paint()
      ..color = AppColors.offwhite
      ..style = PaintingStyle.fill;

    final transparentPaint = Paint()..color = Colors.transparent;
    canvas.drawRect(
        Rect.fromLTWH(0, 0, size.width, size.height), transparentPaint);

    final path = Path()
      ..moveTo(0, 0)
      ..lineTo((loc - 0.08) * size.width, 0) // this is causing the bug on the left side
      ..cubicTo(
        (loc + s * 0.20) * size.width,
        0,
        loc * size.width,
        size.height * 0.70,
        (loc + s * 0.50) * size.width,
        size.height * 0.70,
      )
      ..cubicTo(
        (loc + s) * size.width,
        size.height * 0.70,
        (loc + s - s * 0.20) * size.width,
        0,
        (loc + s + 0.08) * size.width,
        0,
      )
      ..lineTo(size.width, 0)
      ..lineTo(size.width, size.height)
      ..lineTo(0, size.height)
      ..lineTo(0, 0)
      ..close();

    canvas.drawPath(path, shadowPaint);

    canvas.drawPath(path, paint);
  }

From what I found out, the bug seems caused by the fact that the Bézier curve starts in negative X, and by removing the negative value, the shifts disappear. But how to remove this weird bug?

Answer 1

Looks like the bug was fixed in the master channel. This fix will be available in the next stable release. Or you can switch to master channel right now. To do this invoke this command in your terminal:

flutter channel master
flutter upgrade

Answer 2

The bug still remains but to solve my problem, I created another Path for the shadow

final shadowPath = Path()
      ..moveTo(0, 0)
      ..lineTo(
          (loc - 0.08) < 0 ? 0 : (loc - 0.08) * size.width,
          (loc - 0.08) < 0
              ? size.height *
                  0.70 *
                  ((((loc - 0.08) * size.width) / ((-0.08) * size.width)))
              : 0)
      ..cubicTo(
        (loc + s * 0.20) * size.width,
        0,
        loc * size.width,
        size.height * 0.70,
        (loc + s * 0.50) * size.width,
        size.height * 0.70,
      )
      ..cubicTo(
        (loc + s) * size.width,
        size.height * 0.70,
        (loc + s - s * 0.20) * size.width,
        0,
        (loc + s + 0.08) * size.width,
        0,
      )
      ..lineTo(size.width, 0)
      ..lineTo(size.width, size.height)
      ..lineTo(0, size.height)
      ..lineTo(0, 0)
      ..close();
    final path = Path()
      ..moveTo(0, 0)
      ..lineTo((loc - 0.08) * size.width,
          0)
      ..cubicTo(
        (loc + s * 0.20) * size.width,
        0,
        loc * size.width,
        size.height * 0.70,
        (loc + s * 0.50) * size.width,
        size.height * 0.70,
      )
      ..cubicTo(
        (loc + s) * size.width,
        size.height * 0.70,
        (loc + s - s * 0.20) * size.width,
        0,
        (loc + s + 0.08) * size.width,
        0,
      )
      ..lineTo(size.width, 0)
      ..lineTo(size.width, size.height)
      ..lineTo(0, size.height)
      ..lineTo(0, 0)
      ..close();