Polyline Layer causing crashes when panning map

[AbelSAnderson]

I've been experiencing issues while using simple polylines (6 - 10 polylines with 2 points each) on the map. When panning around the map with the polylines in view, crashes occur randomly, usually with 30 seconds of rendering. No stack trace is given, either on the run tab, or with log cat (I'm using android studio), with the last line saying 'Lost connection to device.' or similar. Using 'flutter run --profile' it seems that the raster thread is taking up significantly longer to render frames than it should, with some frames taking ~1000 milliseconds directly before the application crashes.

After some further investigating, it seems like removing the canvas.saveLayer and the canvas.restore calls in the PolylinePainter class solves the issue, although this would probably impact the border / filter paints.

When testing this issue, I was displaying the map full-screen on a physical android tablet.

[JaffaKetchup]

Thanks for the report. This correlates with multiple others, and I would probably now consider this a high priority issue that needs to fixed as soon as possible.

The extra information about the painter methods might help, so much thanks for that!

[ibrierley]

Might be useful for anyone getting the problem to dump a flutter doctor, might also be useful if someone can produce a minimal example for others to try and see if they get the same problem.

I think there was a new flutter version 2.10.0 and am wondering if some have upgraded or not

[ibrierley]

I can't recreate it myself with the polyline example page on a phone, I'll see if I can grab an old tablet tomorrow. It would also be good to see if you can recreate the problem on the example pages, or if its just with your own code.

[AbelSAnderson]

If you're interested...

flutter doctor -v:

[✓] Flutter (Channel stable, 2.8.1, on Microsoft Windows [Version 10.0.19042.1466], locale en-CA)
• Flutter version 2.8.1 at E:\flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 77d935af4d (8 weeks ago), 2021-12-16 08:37:33 -0800
• Engine revision 890a5fca2e
• Dart version 2.15.1

[✓] Android toolchain - develop for Android devices (Android SDK version 32.0.0)
• Android SDK at E:\Android
• Platform android-31, build-tools 32.0.0
• ANDROID_HOME = C:\Users\Abel\Documents\Android
• Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
• Java version OpenJDK Runtime Environment (build 11.0.11+9-b60-7590822)
• All Android licenses accepted.

[✓] Chrome - develop for the web
• Chrome at C:\Program Files (x86)\Google\Chrome\Application\chrome.exe

[✓] Android Studio (version 2020.3)
• Android Studio at C:\Program Files\Android\Android Studio
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 11.0.11+9-b60-7590822)

[✓] Android Studio (version 2021.1)
• Android Studio at E:\Android Studio
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 11.0.11+9-b60-7590822)

[✓] VS Code (version 1.63.2)
• VS Code at C:\Users\Abel\AppData\Local\Programs\Microsoft VS Code
• Flutter extension version 3.32.0

[✓] Connected device (3 available)
• SM T510 (mobile) • R52N70HV2KW • android-arm • Android 11 (API 30)
• Chrome (web) • chrome • web-javascript • Google Chrome 98.0.4758.81
• Edge (web) • edge • web-javascript • Microsoft Edge 97.0.1072.69

• No issues found!

Code to reproduce (simply pan around with the polylines visible in the map view)

import 'package:flutter/material.dart';
import 'package:flutter_map/plugin_api.dart';
import 'package:latlong2/latlong.dart';
import 'package:cached_network_image/cached_network_image.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: FlutterMap(
          options: MapOptions(
            center: LatLng(0, 0),
            zoom: 18.0,
          ),
          children: [
            TileLayerWidget(
              options: TileLayerOptions(
                  urlTemplate:
                      "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
                  subdomains: ['a', 'b', 'c'],
                  tileProvider: const CachedTileProvider()),
            ),
            PolylineLayerWidget(
              options: PolylineLayerOptions(
                polylines: List.generate(
                  10,
                  (index) => Polyline(
                    points: [LatLng(0, 0), LatLng(index / 10000, index / 10000)],
                    strokeWidth: 10.0,
                    color: Colors.blue,
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class CachedTileProvider extends TileProvider {
  const CachedTileProvider();

  @override
  ImageProvider getImage(Coords<num> coords, TileLayerOptions options) {
    return CachedNetworkImageProvider(
      getTileUrl(coords, options),
    );
  }
}

For others who may have this problem, using this class instead of PolylineLayerWidget in the above code will cause no crashes (only change from original is the commented out canvas.saveLayer), although I have not tested this with all the available polyline options (specifically gradients & borders).

import 'dart:math';
import 'dart:ui' as ui;

import 'package:flutter/material.dart';
import 'package:flutter_map/plugin_api.dart';
import 'package:latlong2/latlong.dart';

class CustomPolylineLayerWidget extends StatelessWidget {
  final PolylineLayerOptions options;

  CustomPolylineLayerWidget({Key? key, required this.options}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final mapState = MapState.maybeOf(context)!;
    return PolylineLayer(options, mapState, mapState.onMoved);
  }
}

class PolylineLayer extends StatelessWidget {
  final PolylineLayerOptions polylineOpts;
  final MapState map;
  final Stream<Null>? stream;

  PolylineLayer(this.polylineOpts, this.map, this.stream)
      : super(key: polylineOpts.key);

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (BuildContext context, BoxConstraints bc) {
        final size = Size(bc.maxWidth, bc.maxHeight);
        return _build(context, size);
      },
    );
  }

  Widget _build(BuildContext context, Size size) {
    return StreamBuilder<void>(
      stream: stream, // a Stream<void> or null
      builder: (BuildContext context, _) {
        var polylines = <Widget>[];

        for (var polylineOpt in polylineOpts.polylines) {
          polylineOpt.offsets.clear();

          if (polylineOpts.polylineCulling &&
              !polylineOpt.boundingBox.isOverlapping(map.bounds)) {
            // skip this polyline as it's offscreen
            continue;
          }

          _fillOffsets(polylineOpt.offsets, polylineOpt.points);

          polylines.add(CustomPaint(
            painter: PolylinePainter(polylineOpt),
            size: size,
          ));
        }

        return Container(
          child: Stack(
            children: polylines,
          ),
        );
      },
    );
  }

  void _fillOffsets(final List<Offset> offsets, final List<LatLng> points) {
    for (var i = 0, len = points.length; i < len; ++i) {
      var point = points[i];

      var pos = map.project(point);
      pos = pos.multiplyBy(map.getZoomScale(map.zoom, map.zoom)) -
          map.getPixelOrigin();
      offsets.add(Offset(pos.x.toDouble(), pos.y.toDouble()));
      if (i > 0) {
        offsets.add(Offset(pos.x.toDouble(), pos.y.toDouble()));
      }
    }
  }
}

class PolylinePainter extends CustomPainter {
  final Polyline polylineOpt;

  PolylinePainter(this.polylineOpt);

  @override
  void paint(Canvas canvas, Size size) {
    if (polylineOpt.offsets.isEmpty) {
      return;
    }
    final rect = Offset.zero & size;
    canvas.clipRect(rect);
    final paint = Paint()
      ..strokeWidth = polylineOpt.strokeWidth
      ..strokeCap = StrokeCap.round
      ..strokeJoin = StrokeJoin.round
      ..blendMode = BlendMode.srcOver;

    if (polylineOpt.gradientColors == null) {
      paint.color = polylineOpt.color;
    } else {
      polylineOpt.gradientColors!.isNotEmpty
          ? paint.shader = _paintGradient()
          : paint.color = polylineOpt.color;
    }

    Paint? filterPaint;
    if (polylineOpt.borderColor != null) {
      filterPaint = Paint()
        ..color = polylineOpt.borderColor!.withAlpha(255)
        ..strokeWidth = polylineOpt.strokeWidth
        ..strokeCap = StrokeCap.round
        ..strokeJoin = StrokeJoin.round
        ..blendMode = BlendMode.dstOut;
    }

    final borderPaint = polylineOpt.borderStrokeWidth > 0.0
        ? (Paint()
      ..color = polylineOpt.borderColor ?? Color(0x00000000)
      ..strokeWidth =
          polylineOpt.strokeWidth + polylineOpt.borderStrokeWidth
      ..strokeCap = StrokeCap.round
      ..strokeJoin = StrokeJoin.round
      ..blendMode = BlendMode.srcOver)
        : null;
    var radius = paint.strokeWidth / 2;
    var borderRadius = (borderPaint?.strokeWidth ?? 0) / 2;
    if (polylineOpt.isDotted) {
      var spacing = polylineOpt.strokeWidth * 1.5;
      // canvas.saveLayer(rect, Paint());
      if (borderPaint != null && filterPaint != null) {
        _paintDottedLine(
            canvas, polylineOpt.offsets, borderRadius, spacing, borderPaint);
        _paintDottedLine(
            canvas, polylineOpt.offsets, radius, spacing, filterPaint);
      }
      _paintDottedLine(canvas, polylineOpt.offsets, radius, spacing, paint);
      canvas.restore();
    } else {
      paint.style = PaintingStyle.stroke;
      // canvas.saveLayer(rect, Paint());
      if (borderPaint != null && filterPaint != null) {
        borderPaint.style = PaintingStyle.stroke;
        _paintLine(canvas, polylineOpt.offsets, borderPaint);
        filterPaint.style = PaintingStyle.stroke;
        _paintLine(canvas, polylineOpt.offsets, filterPaint);
      }
      _paintLine(canvas, polylineOpt.offsets, paint);
      canvas.restore();
    }
  }

  void _paintDottedLine(Canvas canvas, List<Offset> offsets, double radius,
      double stepLength, Paint paint) {
    final path = ui.Path();
    var startDistance = 0.0;
    for (var i = 0; i < offsets.length - 1; i++) {
      var o0 = offsets[i];
      var o1 = offsets[i + 1];
      var totalDistance = _dist(o0, o1);
      var distance = startDistance;
      while (distance < totalDistance) {
        var f1 = distance / totalDistance;
        var f0 = 1.0 - f1;
        var offset = Offset(o0.dx * f0 + o1.dx * f1, o0.dy * f0 + o1.dy * f1);
        path.addOval(Rect.fromCircle(center: offset, radius: radius));
        distance += stepLength;
      }
      startDistance = distance < totalDistance
          ? stepLength - (totalDistance - distance)
          : distance - totalDistance;
    }
    path.addOval(
        Rect.fromCircle(center: polylineOpt.offsets.last, radius: radius));
    canvas.drawPath(path, paint);
  }

  void _paintLine(Canvas canvas, List<Offset> offsets, Paint paint) {
    if (offsets.isNotEmpty) {
      final path = ui.Path()..moveTo(offsets[0].dx, offsets[0].dy);
      for (var offset in offsets) {
        path.lineTo(offset.dx, offset.dy);
      }
      canvas.drawPath(path, paint);
    }
  }

  ui.Gradient _paintGradient() => ui.Gradient.linear(polylineOpt.offsets.first,
      polylineOpt.offsets.last, polylineOpt.gradientColors!, _getColorsStop());

  List<double>? _getColorsStop() => (polylineOpt.colorsStop != null &&
      polylineOpt.colorsStop!.length == polylineOpt.gradientColors!.length)
      ? polylineOpt.colorsStop
      : _calculateColorsStop();

  List<double> _calculateColorsStop() {
    final colorsStopInterval = 1.0 / polylineOpt.gradientColors!.length;
    return polylineOpt.gradientColors!
        .map((gradientColor) =>
    polylineOpt.gradientColors!.indexOf(gradientColor) *
        colorsStopInterval)
        .toList();
  }

  @override
  bool shouldRepaint(PolylinePainter other) => false;
}

double _dist(Offset v, Offset w) {
  return sqrt(_dist2(v, w));
}

double _dist2(Offset v, Offset w) {
  return _sqr(v.dx - w.dx) + _sqr(v.dy - w.dy);
}

double _sqr(double x) {
  return x * x;
}

[ibrierley]

All stable for me with that problem code (running 2.8.1 as well). What type of spec is the device being tested ? I'd be a bit surprised if saveLayer caused a problem in itself (as opposed to adding some load which trips it over some limit).

Do you notice the raster thread is a lot better without it ?

[JaffaKetchup]

Related to #1107 perhaps?

[AbelSAnderson]

Device I'm testing on is SM T510 with 2GB of ram, 32 GB of storage.

Running without saveLayer does cause a drastic reduction in the raster thread (see videos below).

Video taken when using the PolylineLayerWidget. Apologies the videos are short, the app crashed a second or two after the video stopped recording. As an additional note, using the CustomPolylineLayerWidget I provided above with saveLayer uncommented provides the same result.

XRecorder_08022022_122639.mp4

Second Video of crash.

XRecorder_08022022_122438.mp4

Using the CustomPolylineLayerWidget (No crash).

XRecorder_08022022_122839.mp4

I did notice that if the app doesn't crash within the first 3-5 seconds, the raster thread usage drops significantly to levels seen in the third video. However, persistent panning of the map causes random spikes, lag and eventually crashes (~10-20 seconds later).

[Kephas3]

Hello,

We encounter the same issue on our app but only on Android devices.
We have the same behavior with unexpected crashes without log in the running terminal or even on Crashlytics.

It appears that crashes occur depending on the number of polyline built. We have a dev environment that shows only few polylines and don't encounter crashes (but low fps).

We passed the option polylineCulling to true, and we clearly see that when we scroll on the map and polylines appears, the app freezes and crash after 2 seconds.

Our current version on stores has the following packages and work perfectly regarding the number of polylines :
flutter_map: ^0.12.0
flutter_map_marker_cluster: ^0.3.4
flutter_map_tappable_polyline: ^1.3.0+1

Problems appeared when we have then updated with : flutter_map: ^0.13.0

[ibrierley]

Is there any way you can try different pull requests between old and new versions to see if you can isolate if there is one particular change that introduced the problem ? Quite tricky for anyone else to debug who doesn't get the issue.

[ibrierley]

I was looking a bit more at this today. saveLayer does have a performance impact, but I guess that's to be expected . I guess the question may be, whether most people need it...(digging into it a bit more, I'm not sure it actually works correct on the flutter web, there seems to be an outstanding issue on flutter)

I note it seems to be introduced in response to this issue... so I'd be wary about changing this.

However, an option to use saveLayer with some suitable name could be passed into polyline/gon options or something and turn it off if someone doesn't need it, to enable performance improvement for them ? (maybe default it to off in a future version release) ?

Just thinking out loud.

[ibrierley]

Just wondering if anyone with the problem has any further thoughts or workarounds. I note there was a possible optimisation mentioned with using addPolygon to canvas rather than the lineTo/moveTo which could be worth exploring if anyone is looking.