cleanup polyline layer, add example

flutter_map/lib/src/layer/polyline_layer.dart

@@ -3,15 +3,14 @@ import 'package:latlong/latlong.dart';
 import 'package:flutter_map/flutter_map.dart';
 import 'dart:ui';
 
-
 class PolylineLayerOptions extends LayerOptions {
   final List<Polyline> polylines;
   PolylineLayerOptions({this.polylines = const []});
 }
 
 class Polyline {
   final List<LatLng> points;
-  List<Offset> offsets;
+  final List<Offset> offsets = [];
   final double strokeWidth;
   final Color color;
   Polyline({
@@ -29,32 +28,31 @@ class PolylineLayer extends StatelessWidget {
   Widget build(BuildContext context) {
     return new StreamBuilder<int>(
       stream: map.onMoved, // a Stream<int> or null
-      builder: (BuildContext context, AsyncSnapshot<int> snapshot) {
-        for (var polylineOpt in this.polylineOpts.polylines) {
-          polylineOpt.offsets = [];
+      builder: (BuildContext context, _) {
+        for (var polylineOpt in polylineOpts.polylines) {
+          polylineOpt.offsets.clear();
           var i = 0;
           for (var point in polylineOpt.points) {
-            i++;
             var pos = map.project(point);
             pos = pos.multiplyBy(map.getZoomScale(map.zoom, map.zoom)) -
                 map.getPixelOrigin();
             polylineOpt.offsets.add(new Offset(pos.x, pos.y));
-            if (i != 1 && i != polylineOpt.points.length) {
+            if (i > 0 && i < polylineOpt.points.length) {
               polylineOpt.offsets.add(new Offset(pos.x, pos.y));
             }
+            i++;
           }
         }
+
         var polylines = <Widget>[];
         for (var polylineOpt in this.polylineOpts.polylines) {
           polylines.add(
             new CustomPaint(
-                painter: new PolylinePainter(polylineOpt),
-                child: new Container(
-                  child: new Text(
-                      "                                                                                                   "),
-                )),
+              painter: new PolylinePainter(polylineOpt),
+            ),
           );
         }
+
         return new Container(
           child: new Stack(
             children: polylines,
@@ -71,10 +69,10 @@ class PolylinePainter extends CustomPainter {
 
   @override
   void paint(Canvas canvas, Size size) {
-    if (polylineOpt.offsets == null) {
+    if (polylineOpt.offsets.isEmpty) {
       return;
     }
-    final Paint paint = new Paint()..color = polylineOpt.color;
+    var paint = new Paint()..color = polylineOpt.color;
     paint.strokeWidth = polylineOpt.strokeWidth;
     canvas.drawPoints(PointMode.lines, polylineOpt.offsets, paint);
   }

flutter_map_example/lib/main.dart

@@ -17,6 +17,7 @@ class MyApp extends StatelessWidget {
       routes: <String, WidgetBuilder>{
         TapToAddPage.route: (context) => new TapToAddPage(),
         EsriPage.route: (context) => new EsriPage(),
+        PolylinePage.route: (context) => new PolylinePage(),
       },
     );
   }
@@ -73,10 +74,9 @@ class HomePage extends StatelessWidget {
                 ),
                 layers: [
                   new TileLayerOptions(
-                    urlTemplate:
-                        "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
-                    subdomains: ['a','b','c']
-                  ),
+                      urlTemplate:
+                          "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
+                      subdomains: ['a', 'b', 'c']),
                   new MarkerLayerOptions(markers: markers)
                 ],
               ),
@@ -186,6 +186,56 @@ class EsriPage extends StatelessWidget {
   }
 }
 
+class PolylinePage extends StatelessWidget {
+  static const String route = "polyline";
+
+  Widget build(BuildContext context) {
+    var points = <LatLng>[
+      new LatLng(51.5, -0.09),
+      new LatLng(53.3498, -6.2603),
+      new LatLng(48.8566, 2.3522),
+    ];
+    return new Scaffold(
+      appBar: new AppBar(title: new Text("Polylines")),
+      drawer: _buildDrawer(context, TapToAddPage.route),
+      body: new Padding(
+        padding: new EdgeInsets.all(8.0),
+        child: new Column(
+          children: [
+            new Padding(
+              padding: new EdgeInsets.only(top: 8.0, bottom: 8.0),
+              child: new Text("Polylines"),
+            ),
+            new Flexible(
+              child: new FlutterMap(
+                options: new MapOptions(
+                  center: new LatLng(51.5, -0.09),
+                  zoom: 5.0,
+                ),
+                layers: [
+                  new TileLayerOptions(
+                      urlTemplate:
+                          "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
+                      subdomains: ['a', 'b', 'c']),
+                  new PolylineLayerOptions(
+                    polylines: [
+                      new Polyline(
+                          points: points,
+                        strokeWidth: 4.0,
+                        color: Colors.purple
+                      ),
+                    ],
+                  )
+                ],
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
 class AppDrawer extends StatelessWidget {
   Widget build(BuildContext context) {
     return new AppBar(
@@ -225,6 +275,13 @@ Drawer _buildDrawer(BuildContext context, String currentRoute) {
             Navigator.popAndPushNamed(context, EsriPage.route);
           },
         ),
+        new ListTile(
+          title: const Text('Polylines'),
+          selected: currentRoute == EsriPage.route,
+          onTap: () {
+            Navigator.popAndPushNamed(context, PolylinePage.route);
+          },
+        ),
       ],
     ),
   );