A plugin for FlutterMap package to handle and plot the current user location
|
Add flutter_map and user_location to your pubspec.yaml :
dependencies:
flutter_map: any
user_location: any # or the latest version on PubUpdate your gradle.properties file with this:
android.enableJetifier=true
android.useAndroidX=true
org.gradle.jvmargs=-Xmx1536M
Also make sure that you have added those dependencies in your build.gradle:
dependencies {
classpath 'com.android.tools.build:gradle:3.3.0'
classpath 'com.google.gms:google-services:4.2.0'
}
compileSdkVersion 28
In order to use this plugin in Android, you have to add this permission in AndroidManifest.xml :
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />Permission check for Android 6+ was added.
And to use it in iOS, you have to add this permission in Info.plist :
NSLocationWhenInUseUsageDescription
NSLocationAlwaysUsageDescription- Note: I have not tested the plugin in ios
- Declare and initialize
MapController mapController = MapController(); List<Marker> markers = []; - Add
UserLocationPlugin()to plugins - Add
MarkerLayerOptionsandUserLocationOptionsinlayers
While performing a location update, We remove and add the location marker on the map. Using a single list to hold this location marker along with other markers will unnecessarily also clear them. For that reason, we need to provide an empty marker array to hold the location marker.
import 'package:flutter/material.dart';
import 'package:user_location/user_location.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:latlong/latlong.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'User Location Plugin Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomePage(),
);
}
}
class HomePage extends StatelessWidget {
// ADD THIS
MapController mapController = MapController();
// ADD THIS
List<Marker> markers = [];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("User Location Plugin")),
body: FlutterMap(
options: MapOptions(
center: LatLng(0,0),
zoom: 15.0,
plugins: [
// ADD THIS
UserLocationPlugin(),
],
),
layers: [
TileLayerOptions(
urlTemplate: "https://api.tiles.mapbox.com/v4/"
"{id}/{z}/{x}/{y}@2x.png?access_token={accessToken}",
additionalOptions: {
'accessToken': '<access_token>',
'id': 'mapbox.streets',
},
),
// ADD THIS
MarkerLayerOptions(markers: markers),
// ADD THIS
UserLocationOptions(
context: context,
mapController: mapController,
markers: markers,
),
],
// ADD THIS
mapController: mapController,
));
}
}markerWidgetoverrides the default marker widgetmarkerlocationStreamprovides the current location of the markerupdateMapLocationOnPositionChangemoves the map to the current location of the user if set totrueshowMoveToCurrentLocationFloatingActionButtondisplays a floating action button at the bottom right of the screen which will redirect the user to their current location. This is useful if the aboveupdateMapLocationOnPositionChangeis set tofalsemoveToCurrentLocationFloatingActionButtonis a widget when passed overrides the default floating action button. Default floating action button code:
Container(
decoration: BoxDecoration(
color: Colors.blueAccent,
borderRadius: BorderRadius.circular(20.0),
boxShadow: [
BoxShadow(color: Colors.grey, blurRadius: 10.0)
]),
child: Icon(
Icons.my_location,
color: Colors.white,
),
)
See the example/ folder for a working example app.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent