flutter_map_location_marker 4.1.3 copy "flutter_map_location_marker: ^4.1.3" to clipboard
flutter_map_location_marker: ^4.1.3 copied to clipboard

A flutter map plugin for displaying device current location.

flutter_map_location_marker #

pub package github tag license

A flutter_map plugin for displaying device current location. Interface preview

Features #

  • Simple: The only thing to do is adding a LocationMarkerLayerWidget() in to your map because all parameters have good default values.

  • Flexible: The default implementation is receiving device's position from the geolocator package and receiving device's heading from the flutter_compass package, but with type conversion, streams from other source are also supported.

  • Auto-centering: The map center on the new location when location is updated.

  • Auto-rotating: The map can be rotated automatically as navigation mode.

  • Customization: The location marker can be fully customized, even the colors of accuracy circle and header.

Usage #

Add flutter_map_location_marker to your pubspec.yaml:

dependencies:
  flutter_map_location_marker: any // or latest verion

Add permission, please follow the instruction from geolocator package.

Add the layer widget into FlutterMap:

Widget build(BuildContext context) {
  return FlutterMap(
    children: [
      TileLayerWidget(
        options: TileLayerOptions(
          urlTemplate: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
          subdomains: ['a', 'b', 'c'],
        ),
      ),
      LocationMarkerLayerWidget(), // <-- add layer widget here
    ],
  );
}

Alternatively, you can use the old style to create the layer:

Widget build(BuildContext context) {
  return FlutterMap(
    options: MapOptions(
      plugins: [
        LocationMarkerPlugin(), // <-- add plugin here
      ],
    ),
    layers: [
      TileLayerOptions(
        urlTemplate: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
        subdomains: ['a', 'b', 'c'],
      ),
      LocationMarkerLayerOptions(), // <-- add layer options here
    ],
  );
}

Examples #

  1. Marker Customization : Change the marker to any widget you want.

  2. Floating Action Button for Centering Current Location : Use a floating action button to move and zoom the map to current location.

  3. Change Geolocator Settings : Define Geolocator settings yourself.

  4. Selectable Distance Filter : Change Geolocator settings at the runtime.

  5. Custom Stream : Use your own stream, such as position stream from other library or predefined route, as the source.

  6. Navigation Mode : Rotate the map to keep heading pointing upward.