user_location 0.0.5 user_location: ^0.0.5 copied to clipboard
A plugin for FlutterMap to handle and plot the current user location.
user_location #
A plugin for FlutterMap package to handle and plot the current user location
Usage #
Add flutter_map and user_location to your pubspec.yaml :
dependencies:
flutter_map: any
user_location: any # or the latest version on Pub
Update 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
Getting Started #
Android #
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.
iOS #
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
Demo Code #
Add it in you FlutterMap. Make sure to pass the required options in the UserLocationOptions
and marker in MarkerLayerOptions
also as of now you will need to pass seperate list of empty maker in the markers parameter.
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 {
MapController mapController = MapController();
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: [
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',
},
),
MarkerLayerOptions(markers: markers),
UserLocationOptions(
context: context,
mapController: mapController,
markers: markers,
),
],
mapController: mapController,
));
}
}
Optional parameters #
markerWidget
overrides the default marker widgetmarkerlocationStream
provides the current location of the markerupdateMapLocationOnPositionChange
moves the map to the current location of the user if set totrue
showMoveToCurrentLocationFloatingActionButton
displays 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 aboveupdateMapLocationOnPositionChange
is set tofalse
moveToCurrentLocationFloatingActionButton
is 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,
),
)
Run the example #
See the example/
folder for a working example app.