Git Product home page Git Product logo

user_location_plugin's Introduction

user_location

pub package travis Codemagic build status

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:
    git:
      url: https://github.com/igaurab/user_location_plugin.git

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

  • Note: I have not tested the plugin in ios

On iOS you'll need to add the NSLocationWhenInUseUsageDescription to your Info.plist file in order to access the device's location. Simply open your Info.plist file and add the following:

<key>NSLocationWhenInUseUsageDescription</key>
<string>This app needs access to location when open.</string>

If you would like to access the device's location when your App is running in the background, you should also add the NSLocationAlwaysAndWhenInUseUsageDescription (if your App support iOS 10 or earlier you should also add the key NSLocationAlwaysUsageDescription) key to your Info.plist file:

<key>NSLocationAlwaysUsageDescription</key>
<string>This app needs access to location when in the background.</string>
<key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
<string>This app needs access to location when open and in the background.</string>

Installation guide

  • Declare and initialize MapController mapController = MapController(); List<Marker> markers = [];
  • Add UserLocationPlugin() to plugins
  • Add MarkerLayerOptions and UserLocationOptions in layers

Sample code

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();
  UserLocationOptions userLocationOptions;
  // ADD THIS
  List<Marker> markers = [];
  @override
  Widget build(BuildContext context) {
    // You can use the userLocationOptions object to change the properties
    // of UserLocationOptions in runtime
    userLocationOptions = UserLocationOptions(
                context: context,
                mapController: mapController,
                markers: markers,
                );
    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,
          ],
          // ADD THIS
          mapController: mapController,
        ));
  }
}

Optional parameters

  • markerWidget overrides the default marker widget
  • onLocationChange is a callback function to get the current location of user. It's uses is defined in the example program.
  • updateMapLocationOnPositionChange moves the map to the current location of the user if set to true
  • showMoveToCurrentLocationFloatingActionButton displays a floating action button at the bottom right of the screen which will redirect the user to their current location. You can also pass your own widget as FAB and control the position using options fabBottom and fabRight options.
  • showHeading is used to control whether or not to show heading in the marker widget
  • zoomToCurrentLocationOnLoad if true, zooms to the current location of the user with a zoom factor 17
  • 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,
    ),
)
  • locationUpdateInBackground if false, the location update stream is paused if the app is in the background. Once the app is resumed the stream is resumed as well. Option can be useful to reduce the battery consumption while the app is running in the background. Default: true.

  • locationUpdateIntervalMs desired interval for a location updates, in milliseconds. Default: 1000 milliseconds.

Run the example

See the example/ folder for a working example app.

user_location_plugin's People

Contributors

ahmed-gubara avatar amias-samir avatar binabh avatar boris612 avatar ivansapr avatar javi11 avatar joharei avatar kk90 avatar konishon avatar m-oehme avatar mrkajetanp avatar murraypurves avatar qbit23 avatar sjoerd0301 avatar snap10 avatar tlserver avatar xennis avatar xni06 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.