FAB position via options; adds animated map movement

Author: qbit23

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1 @@
+{"_info":"// This is a generated file; do not edit or check into version control.","dependencyGraph":[{"name":"location","dependencies":[]},{"name":"path_provider","dependencies":[]},{"name":"sqflite","dependencies":[]},{"name":"user_location","dependencies":["location"]}]}

.github/ISSUE_TEMPLATE/feature_request.md

@@ -33,38 +33,41 @@ class HomePage extends StatelessWidget {
     });
 
     return Scaffold(
-        appBar: AppBar(title: Text("Plugin User Location")),
-        body: FlutterMap(
-          options: MapOptions(
-            center: LatLng(27.7172, 85.3240),
-            zoom: 15.0,
-            plugins: [
-              UserLocationPlugin(),
-            ],
-          ),
-          layers: [
-            TileLayerOptions(
-              urlTemplate: "https://api.tiles.mapbox.com/v4/"
-                  "{id}/{z}/{x}/{y}@2x.png?access_token={accessToken}",
-              additionalOptions: {
-                'accessToken':
-                    'pk.eyJ1IjoiaWdhdXJhYiIsImEiOiJjazFhOWlkN2QwYzA5M2RyNWFvenYzOTV0In0.lzjuSBZC6LcOy_oRENLKCg',
-                'id': 'mapbox.streets',
-              },
-            ),
-            MarkerLayerOptions(markers: markers),
-            UserLocationOptions(
-                context: context,
-                mapController: mapController,
-                markers: markers,
-                onLocationUpdate: (LatLng pos) =>
-                    print("onLocationUpdate ${pos.toString()}"),
-                updateMapLocationOnPositionChange: true,
-                showMoveToCurrentLocationFloatingActionButton: true,
-                verbose: false),
+      appBar: AppBar(title: Text("Plugin User Location")),
+      body: FlutterMap(
+        options: MapOptions(
+          center: LatLng(27.7172, 85.3240),
+          zoom: 15.0,
+          plugins: [
+            UserLocationPlugin(),
           ],
-          mapController: mapController,
-        ));
+        ),
+        layers: [
+          TileLayerOptions(
+            urlTemplate: "https://api.tiles.mapbox.com/v4/"
+                "{id}/{z}/{x}/{y}@2x.png?access_token={accessToken}",
+            additionalOptions: {
+              'accessToken':
+                  'pk.eyJ1IjoiaWdhdXJhYiIsImEiOiJjazFhOWlkN2QwYzA5M2RyNWFvenYzOTV0In0.lzjuSBZC6LcOy_oRENLKCg',
+              'id': 'mapbox.streets',
+            },
+          ),
+          MarkerLayerOptions(markers: markers),
+          UserLocationOptions(
+              context: context,
+              mapController: mapController,
+              markers: markers,
+              onLocationUpdate: (LatLng pos) =>
+                  print("onLocationUpdate ${pos.toString()}"),
+              updateMapLocationOnPositionChange: true,
+              showMoveToCurrentLocationFloatingActionButton: true,
+              fabBottom: 50,
+              fabRight: 50,
+              verbose: false),
+        ],
+        mapController: mapController,
+      ),
+    );
   }
 
   void dispose() {

.gitignore

@@ -18,7 +18,8 @@ class MapsPluginLayer extends StatefulWidget {
   _MapsPluginLayerState createState() => _MapsPluginLayerState();
 }
 
-class _MapsPluginLayerState extends State<MapsPluginLayer> {
+class _MapsPluginLayerState extends State<MapsPluginLayer>
+    with TickerProviderStateMixin {
   LatLng _currentLocation;
   Marker _locationMarker;
   EventChannel _stream = EventChannel('locationStatusStream');
@@ -128,10 +129,16 @@ class _MapsPluginLayerState extends State<MapsPluginLayer> {
   }
 
   void _moveMapToCurrentLocation() {
-    widget.options.mapController.move(
+    animatedMapMove(
         LatLng(_currentLocation.latitude ?? LatLng(0, 0),
             _currentLocation.longitude ?? LatLng(0, 0)),
-        widget.map.zoom ?? 15);
+        widget.map.zoom ?? 15,
+        widget.options.mapController,
+        this);
+    // widget.options.mapController.move(
+    //     LatLng(_currentLocation.latitude ?? LatLng(0, 0),
+    //         _currentLocation.longitude ?? LatLng(0, 0)),
+    //     widget.map.zoom ?? 15);
   }
 
   void _handleLocationChanges() {
@@ -164,13 +171,14 @@ class _MapsPluginLayerState extends State<MapsPluginLayer> {
   Widget build(BuildContext context) {
     return widget.options.showMoveToCurrentLocationFloatingActionButton
         ? Positioned(
-            bottom: 20.0,
-            right: 20.0,
-            height: 40.0,
-            width: 40.0,
+            bottom: widget.options.fabBottom,
+            right: widget.options.fabRight,
+            height: widget.options.fabHeight,
+            width: widget.options.fabWidth,
             child: InkWell(
                 hoverColor: Colors.blueAccent[200],
                 onTap: () {
+                  initialize();
                   _moveMapToCurrentLocation();
                 },
                 child: widget.options
@@ -192,4 +200,39 @@ class _MapsPluginLayerState extends State<MapsPluginLayer> {
           )
         : Container();
   }
+
+  void animatedMapMove(
+      LatLng destLocation, double destZoom, _mapController, vsync) {
+    // Create some tweens. These serve to split up the transition from one location to another.
+    // In our case, we want to split the transition be<tween> our current map center and the destination.
+    final _latTween = Tween<double>(
+        begin: _mapController.center.latitude, end: destLocation.latitude);
+    final _lngTween = Tween<double>(
+        begin: _mapController.center.longitude, end: destLocation.longitude);
+    final _zoomTween = Tween<double>(begin: _mapController.zoom, end: destZoom);
+
+    // Create a animation controller that has a duration and a TickerProvider.
+    var controller = AnimationController(
+        duration: const Duration(milliseconds: 500), vsync: vsync);
+    // The animation determines what path the animation will take. You can try different Curves values, although I found
+    // fastOutSlowIn to be my favorite.
+    Animation<double> animation =
+        CurvedAnimation(parent: controller, curve: Curves.fastOutSlowIn);
+
+    controller.addListener(() {
+      _mapController.move(
+          LatLng(_latTween.evaluate(animation), _lngTween.evaluate(animation)),
+          _zoomTween.evaluate(animation));
+    });
+
+    animation.addStatusListener((status) {
+      if (status == AnimationStatus.completed) {
+        controller.dispose();
+      } else if (status == AnimationStatus.dismissed) {
+        controller.dispose();
+      }
+    });
+
+    controller.forward();
+  }
 }

.metadata

@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_map/plugin_api.dart';
 import 'package:latlong/latlong.dart';
+import 'package:location/location.dart';
 
 class UserLocationOptions extends LayerOptions {
   BuildContext context;
@@ -13,6 +14,11 @@ class UserLocationOptions extends LayerOptions {
   Widget moveToCurrentLocationFloatingActionButton;
   Function(LatLng) onLocationUpdate;
 
+  double fabBottom;
+  double fabRight;
+  double fabHeight;
+  double fabWidth;
+
   bool verbose;
 
   UserLocationOptions(
@@ -24,5 +30,9 @@ class UserLocationOptions extends LayerOptions {
       this.updateMapLocationOnPositionChange: true,
       this.showMoveToCurrentLocationFloatingActionButton: true,
       this.moveToCurrentLocationFloatingActionButton,
-      this.verbose: false});
+      this.verbose: false,
+      this.fabBottom: 20,
+      this.fabHeight: 40,
+      this.fabRight: 20,
+      this.fabWidth: 40});
 }