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?
I've created a DartPad of essentially the same code for reference.
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.
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>