Polylines paint on top of other widgets

[squashmode]

To reproduce: Run the example app (version 0.0.9 exhibits this problem). Go to the polylines tab, then scroll the map so that the polylines are pushed off-screen. On Android, at least, the polylines paint on top of the surrounding widgets, though not the app-bar. See the attached picture.

[johnpryan]

Good catch! thanks for filing an issue

[avioli]

Sorry - don't have the time to make a Pull Request.

This should do it:

diff --git a/flutter_map/lib/src/layer/polyline_layer.dart b/flutter_map/lib/src/layer/polyline_layer.dart
index ada5fe7..f0d90a2 100644
--- a/flutter_map/lib/src/layer/polyline_layer.dart
+++ b/flutter_map/lib/src/layer/polyline_layer.dart
@@ -27,6 +27,15 @@ class PolylineLayer extends StatelessWidget {
   PolylineLayer(this.polylineOpts, this.map);

   Widget build(BuildContext context) {
+    return new LayoutBuilder(
+      builder: (BuildContext context, BoxConstraints bc) {
+        final size = new Size(bc.maxWidth, bc.maxHeight);
+        return _build(context, size);
+      },
+    );
+  }
+
+  Widget _build(BuildContext context, Size size) {
     return new StreamBuilder<int>(
       stream: map.onMoved, // a Stream<int> or null
       builder: (BuildContext context, _) {
@@ -50,6 +61,7 @@ class PolylineLayer extends StatelessWidget {
           polylines.add(
             new CustomPaint(
               painter: new PolylinePainter(polylineOpt),
+              size: size,
             ),
           );
         }
@@ -70,11 +82,12 @@ class PolylinePainter extends CustomPainter {

   @override
   void paint(Canvas canvas, Size size) {
-    if (polylineOpt.offsets.isEmpty) {
-      return;
-    }
-    var paint = new Paint()..color = polylineOpt.color;
-    paint.strokeWidth = polylineOpt.strokeWidth;
+    if (polylineOpt.offsets.isEmpty) return;
+    final rect = Offset.zero & size;
+    canvas.clipRect(rect);
+    final paint = new Paint()
+      ..color = polylineOpt.color
+      ..strokeWidth = polylineOpt.strokeWidth;
     canvas.drawPoints(PointMode.lines, polylineOpt.offsets, paint);
   }

Using final rect = Offset.zero & Size.infinite; works fine, but should be avoided.

Tested on a fresh clone and ran the example.

[solid-software]

I verified changes proposed - it works for me to. Here is PR: https://github.com/apptreesoftware/flutter_map/pull/67

Thanks @avioli!

[johnpryan]

https://github.com/johnpryan/flutter_map/pull/67 has been merged