iosfluttersimulator

Draw smooth lines using Flutter for iOS devices


I am trying to draw smooth lines using flutter. When working on an Android simulator, the lines draw fine, no problem. However when I draw on an IOS simulator as well as a physical iPad, for very specific circumstances, particularly when drawing a straight line from right to left and back to right, the line ends in a sharp edge instead of a smooth circle (screen grab below). I'm wondering if there is a better algorithm as I'm currently utilizing a mid-point algorithm using quadraticBezierTo. Or if this is just an issue with how flutter interacts with iOS?enter image description here

I've created a DartPad of essentially the same code for reference.

DartPad Drawing canvas

Also below is the code for just the CustomPainter

class DrawingPainter extends CustomPainter {
  final List<DrawingModel> sketches;
  final drawingEngine = DrawingEngine();

  DrawingPainter({required this.sketches});

  @override
  void paint(Canvas canvas, Size size) {
    for (DrawingModel sketch in sketches) {
      Paint paint = Paint()
        ..color = sketch.color
        ..strokeWidth = sketch.size
        ..strokeCap = StrokeCap.round
        ..strokeJoin = StrokeJoin.round
        ..isAntiAlias = true
        ..style = PaintingStyle.stroke;
      final path = drawingEngine.createPath(sketch.points);

      canvas.drawPath(path, paint);
    }
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true;
  }
}

class DrawingEngine {
  createPath(List<Offset> points) {
    final path = Path();

    path.moveTo(points.first.dx, points.first.dy);

    for (int i = 1; i < points.length - 1; ++i) {
      final mid = calculateMidPoint(points[i - 1], points[i]);
      final control = points[i - 1];
      path.quadraticBezierTo(control.dx, control.dy, mid.dx, mid.dy);
    }
    return path;
  }

  calculateMidPoint(Offset point1, Offset point2) {
    final newMidPoint =
        Offset((point1.dx + point2.dx) / 2, (point1.dy + point2.dy) / 2);

    return newMidPoint;
  }
}

I've looked at other similar StackOverflow's as well as Google for implementation of drawing smooth lines, but nothing specific to issues with iOS when using Flutter.


Solution

  • If anyone runs into something similar, turns out it is an issue with Flutter's new rendering engine, Impeller. I opened a bug ticket here

    In the interim, you can run Flutter on the old rendering engine for iOS

    For dev, from the command line run:

    flutter run --no-enable-impeller
    

    or add an arg to your launch.json file

            {
            "name": "flutter_coloring_book",
            "request": "launch",
            "type": "dart",
            "args": [
                "--no-enable-impeller"
            ],
        },
    

    To disable Impeller on iOS when deploying your app, add the following tags under the top-level tag in your app’s Info.plist file.

      <key>FLTEnableImpeller</key>