WIP: Gestures update - two finger rotation / interactions filter / map events

example/android/app/src/main/AndroidManifest.xml

@@ -5,6 +5,10 @@
          In most cases you can leave this as-is, but you if you want to provide
          additional functionality it is fine to subclass or reimplement
          FlutterApplication and put your custom class here. -->
+
+    <uses-permission android:name="android.permission.INTERNET"/>
+    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
+
     <application
         android:name="io.flutter.app.FlutterApplication"
         android:label="example"

example/lib/main.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_map_example/pages/interactive_test_page.dart';
 
 import './pages/animated_map_controller.dart';
 import './pages/circle.dart';
@@ -58,6 +59,7 @@ class MyApp extends StatelessWidget {
         CustomCrsPage.route: (context) => CustomCrsPage(),
         LiveLocationPage.route: (context) => LiveLocationPage(),
         TileLoadingErrorHandle.route: (context) => TileLoadingErrorHandle(),
+        InteractiveTestPage.route: (context) => InteractiveTestPage(),
       },
     );
   }

example/lib/pages/interactive_test_page.dart

@@ -0,0 +1,363 @@
+import 'dart:async';
+
+import 'package:flutter/material.dart';
+import 'package:flutter_map/flutter_map.dart';
+import 'package:latlong/latlong.dart';
+
+import '../widgets/drawer.dart';
+
+class InteractiveTestPage extends StatefulWidget {
+  static const String route = 'interactive_test_page';
+
+  @override
+  State createState() {
+    // TODO: try out InteractiveTestPageState it is using StreamBuilder for update Events view and using boolean flags for Filter
+    return InteractiveTestPageAlternativeState();
+  }
+}
+
+class InteractiveTestPageState extends State<InteractiveTestPage> {
+  MapController mapController;
+
+  bool move = false;
+  bool fling = false;
+  bool pinchZoom = true;
+  bool doubleTapZoom = true;
+  bool rotate = false;
+
+  @override
+  void initState() {
+    super.initState();
+    mapController = MapController();
+  }
+
+  int _collectInteractiveFlags() {
+    var flags = InteractiveFlag.none;
+    if (move) {
+      flags = flags | InteractiveFlag.move; // use |= operator
+    }
+    if (fling) {
+      flags |= InteractiveFlag.fling;
+    }
+    if (pinchZoom) {
+      flags |= InteractiveFlag.pinchZoom;
+    }
+    if (doubleTapZoom) {
+      flags |= InteractiveFlag.doubleTapZoom;
+    }
+    if (rotate) {
+      flags |= InteractiveFlag.rotate;
+    }
+
+    return flags;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    var circleMarkers = <CircleMarker>[
+      CircleMarker(
+          point: LatLng(51.5, -0.09),
+          color: Colors.blue.withOpacity(0.7),
+          borderStrokeWidth: 2,
+          useRadiusInMeter: true,
+          radius: 2000 // 2000 meters | 2 km
+          ),
+    ];
+
+    return Scaffold(
+      appBar: AppBar(title: Text('Test out Interactive flags!')),
+      drawer: buildDrawer(context, InteractiveTestPage.route),
+      body: Padding(
+        padding: EdgeInsets.all(8.0),
+        child: Column(
+          children: [
+            Row(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              children: <Widget>[
+                MaterialButton(
+                  child: Text('Move'),
+                  color: move ? Colors.greenAccent : Colors.redAccent,
+                  onPressed: () {
+                    setState(() {
+                      move = !move;
+                    });
+                  },
+                ),
+                MaterialButton(
+                  child: Text('Fling'),
+                  color: fling ? Colors.greenAccent : Colors.redAccent,
+                  onPressed: () {
+                    setState(() {
+                      fling = !fling;
+                    });
+                  },
+                ),
+                MaterialButton(
+                  child: Text('Pinch zoom'),
+                  color: pinchZoom ? Colors.greenAccent : Colors.redAccent,
+                  onPressed: () {
+                    setState(() {
+                      pinchZoom = !pinchZoom;
+                    });
+                  },
+                ),
+              ],
+            ),
+            Row(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              children: <Widget>[
+                MaterialButton(
+                  child: Text('Double tap zoom'),
+                  color: doubleTapZoom ? Colors.greenAccent : Colors.redAccent,
+                  onPressed: () {
+                    setState(() {
+                      doubleTapZoom = !doubleTapZoom;
+                    });
+                  },
+                ),
+                MaterialButton(
+                  child: Text('Rotate'),
+                  color: rotate ? Colors.greenAccent : Colors.redAccent,
+                  onPressed: () {
+                    setState(() {
+                      rotate = !rotate;
+                    });
+                  },
+                ),
+                MaterialButton(
+                  color: Colors.grey,
+                  child: Text('Skew'),
+                  onPressed: null,
+                ),
+              ],
+            ),
+            Padding(
+              padding: EdgeInsets.only(top: 8.0, bottom: 8.0),
+              child: Center(
+                child: FutureBuilder<Null>(
+                  future: mapController.onReady,
+                  builder:
+                      (BuildContext context, AsyncSnapshot<Null> snapshot) {
+                    if (snapshot.connectionState != ConnectionState.done) {
+                      return Text('No MapEvent fired');
+                    }
+
+                    return StreamBuilder<MapEvent>(
+                      stream: mapController.mapEventStream,
+                      builder: (BuildContext context,
+                          AsyncSnapshot<MapEvent> snapshot) {
+                        if (snapshot.connectionState == ConnectionState.none ||
+                            !snapshot.hasData) {
+                          return Text('No MapEvent fired');
+                        }
+
+                        return Text(
+                          'Current event: ${snapshot.data.runtimeType}\nSource: ${snapshot.data.source}',
+                          textAlign: TextAlign.center,
+                        );
+                      },
+                    );
+                  },
+                ),
+              ),
+            ),
+            Flexible(
+              child: FlutterMap(
+                mapController: mapController,
+                options: MapOptions(
+                  center: LatLng(51.5, -0.09),
+                  zoom: 11.0,
+                  interactiveFlags: _collectInteractiveFlags(),
+                ),
+                layers: [
+                  TileLayerOptions(
+                      urlTemplate:
+                          'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+                      subdomains: ['a', 'b', 'c']),
+                  CircleLayerOptions(circles: circleMarkers),
+                ],
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class InteractiveTestPageAlternativeState extends State<InteractiveTestPage> {
+  MapController mapController;
+
+  // Enable pinchZoom and doubleTapZoomBy by default
+  int flags = InteractiveFlag.pinchZoom | InteractiveFlag.doubleTapZoom;
+
+  // Here is the last moveEvent
+  MapEvent lastMapEvent;
+
+  StreamSubscription<MapEvent> subscription;
+
+  @override
+  void initState() {
+    super.initState();
+    mapController = MapController();
+
+    mapController.onReady.then((_) {
+      // at this point we can listen to [mapEventStream]
+      // use stream transformer or anything you want
+      subscription = mapController.mapEventStream.listen((MapEvent mapEvent) {
+        setState(() {
+          // uncomment to filter specific events (hot reload won't take any effect,
+          // because this callback is already registered in initState, so after hot reload
+          // you should go away another page then come back OR just use hot restart...)
+          // if (mapEvent is! MapEventWithMove) {
+          lastMapEvent = mapEvent;
+          //}
+        });
+      });
+    });
+  }
+
+  @override
+  void dispose() {
+    if (subscription != null) {
+      subscription.cancel();
+    }
+
+    super.dispose();
+  }
+
+  void updateFlags(int flag) {
+    if (InteractiveFlag.hasFlag(flags, flag)) {
+      // remove flag from flags
+      flags &= ~flag;
+    } else {
+      // add flag to flags
+      flags |= flag;
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    var circleMarkers = <CircleMarker>[
+      CircleMarker(
+          point: LatLng(51.5, -0.09),
+          color: Colors.blue.withOpacity(0.7),
+          borderStrokeWidth: 2,
+          useRadiusInMeter: true,
+          radius: 2000 // 2000 meters | 2 km
+          ),
+    ];
+
+    return Scaffold(
+      appBar: AppBar(title: Text('Test out Interactive flags!')),
+      drawer: buildDrawer(context, InteractiveTestPage.route),
+      body: Padding(
+        padding: EdgeInsets.all(8.0),
+        child: Column(
+          children: [
+            Row(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              children: <Widget>[
+                MaterialButton(
+                  child: Text('Move'),
+                  color: InteractiveFlag.hasFlag(flags, InteractiveFlag.move)
+                      ? Colors.greenAccent
+                      : Colors.redAccent,
+                  onPressed: () {
+                    setState(() {
+                      updateFlags(InteractiveFlag.move);
+                    });
+                  },
+                ),
+                MaterialButton(
+                  child: Text('Fling'),
+                  color: InteractiveFlag.hasFlag(flags, InteractiveFlag.fling)
+                      ? Colors.greenAccent
+                      : Colors.redAccent,
+                  onPressed: () {
+                    setState(() {
+                      updateFlags(InteractiveFlag.fling);
+                    });
+                  },
+                ),
+                MaterialButton(
+                  child: Text('Pinch zoom'),
+                  color:
+                      InteractiveFlag.hasFlag(flags, InteractiveFlag.pinchZoom)
+                          ? Colors.greenAccent
+                          : Colors.redAccent,
+                  onPressed: () {
+                    setState(() {
+                      updateFlags(InteractiveFlag.pinchZoom);
+                    });
+                  },
+                ),
+              ],
+            ),
+            Row(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              children: <Widget>[
+                MaterialButton(
+                  child: Text('Double tap zoom'),
+                  color: InteractiveFlag.hasFlag(
+                          flags, InteractiveFlag.doubleTapZoom)
+                      ? Colors.greenAccent
+                      : Colors.redAccent,
+                  onPressed: () {
+                    setState(() {
+                      updateFlags(InteractiveFlag.doubleTapZoom);
+                    });
+                  },
+                ),
+                MaterialButton(
+                  child: Text('Rotate'),
+                  color: InteractiveFlag.hasFlag(flags, InteractiveFlag.rotate)
+                      ? Colors.greenAccent
+                      : Colors.redAccent,
+                  onPressed: () {
+                    setState(() {
+                      updateFlags(InteractiveFlag.rotate);
+                    });
+                  },
+                ),
+                MaterialButton(
+                  color: Colors.grey,
+                  child: Text('Skew'),
+                  onPressed: null,
+                ),
+              ],
+            ),
+            Padding(
+              padding: EdgeInsets.only(top: 8.0, bottom: 8.0),
+              child: Center(
+                child: Text(
+                  lastMapEvent == null
+                      ? 'No MapEvent fired'
+                      : 'Current event: ${lastMapEvent.runtimeType}\nSource: ${lastMapEvent.source}',
+                  textAlign: TextAlign.center,
+                ),
+              ),
+            ),
+            Flexible(
+              child: FlutterMap(
+                mapController: mapController,
+                options: MapOptions(
+                  center: LatLng(51.5, -0.09),
+                  zoom: 11.0,
+                  interactiveFlags: flags,
+                ),
+                layers: [
+                  TileLayerOptions(
+                      urlTemplate:
+                          'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+                      subdomains: ['a', 'b', 'c']),
+                  CircleLayerOptions(circles: circleMarkers),
+                ],
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}