LatLng Picker #

A beautiful Flutter package that provides an interactive location latitude and longitude picker with physics-based animations for Google Maps. Pick locations with style using an animated pin that bounces and elevates with realistic physics.

What is it? #

LatLng Picker is a wrapper widget for Google Maps Flutter that adds an intuitive latitude and longitude picking experience. Instead of placing markers, users can pan the map while a fixed center pin shows where they're selecting. The pin features smooth animations with:

• Fixed center positioning
• Physics-based bounce effects
• Elevation animations with dynamic shadows
• Haptic feedback
• Fully customizable appearance

Under the Hood #

This package uses:

• google_maps_flutter - The official Google Maps plugin for Flutter
• Flutter's Animation Framework - For smooth, physics-based pin animations
• Custom AnimationControllers - To orchestrate bounce, stretch, and shadow effects

How to Use #

Installation #

Add to your pubspec.yaml:

dependencies:
  map_latlng_picker: ^1.0.3
  google_maps_flutter: ^2.14.0

Google Maps API Key Setup #

Before using this package, you need to configure Google Maps API keys for your target platforms:

🌐 Web

Add to web/index.html:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE"></script>

🤖 Android

Add to android/app/src/main/AndroidManifest.xml inside <application>:

<meta-data
    android:name="com.google.android.geo.API_KEY"
    android:value="YOUR_API_KEY_HERE"/>

🍎 iOS

In ios/Runner/AppDelegate.swift:

import GoogleMaps

override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
) -> Bool {
    GMSServices.provideAPIKey("YOUR_API_KEY_HERE")
    GeneratedPluginRegistrant.register(with: self)
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
}

📚 Get your Google Maps API key

Basic Usage #

Simply wrap your GoogleMap widget with LatLngLocationPicker:

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:map_latlng_picker/map_latlng_picker.dart';

class LocationPickerScreen extends StatefulWidget {
  @override
  State<LocationPickerScreen> createState() => _LocationPickerScreenState();
}

class _LocationPickerScreenState extends State<LocationPickerScreen> {
  final LatLngLocationPickerController _controller = LatLngLocationPickerController();
  LatLng? _selectedLocation;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Pick Location')),
      body: LatLngLocationPicker(
        controller: _controller,
        enabled: true,
        onLocationPicked: (location) {
          setState(() {
            _selectedLocation = location;
          });
          print('Selected: ${location.latitude}, ${location.longitude}');
        },
        child: GoogleMap(
          initialCameraPosition: CameraPosition(
            target: LatLng(37.7749, -122.4194),
            zoom: 14,
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          _controller.isEnabled
            ? _controller.disable?.call()
            : _controller.enable?.call();
        },
        child: Icon(_controller.isEnabled ? Icons.check : Icons.location_on),
      ),
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

Advanced Usage with Custom Pin #

LatLngLocationPicker(
  enabled: true,
  pinOffset: 60,
  useHapticFeedback: true,
  onLocationPicked: (location) {
    // Handle picked location
  },
  pinWidget: AnimatedLocationPin(
    state: _isPanning ? PinState.elevated : PinState.idle,
    color: Colors.blue,
    innerColor: Colors.white,
    size: 50,
    stickHeight: 25,
    shadowDistance: 20,
  ),
  child: GoogleMap(
    initialCameraPosition: CameraPosition(
      target: LatLng(37.7749, -122.4194),
      zoom: 14,
    ),
  ),
)

Simplified Pin Customization with AnimatePinData #

LatLngLocationPicker(
  enabled: true,
  pinData: AnimatePinData(
    color: Colors.blue,
    innerColor: Colors.white,
    stickColor: Colors.blueAccent,
    size: 50,
    stickHeight: 25,
    stickBorderRadius: 4.0,
    shadowColor: Colors.black54,
    shadowDistance: 10.0,
  ),
  onLocationPicked: (location) {
    // Handle picked location
  },
  child: GoogleMap(
    initialCameraPosition: CameraPosition(
      target: LatLng(37.7749, -122.4194),
      zoom: 14,
    ),
  ),
)

Parameters #

LatLngLocationPicker #

AnimatePinData #

AnimatedLocationPin #

LatLngLocationPickerController #

Pin Animation Modes #

Simple Mode (Boolean) #

Use isElevated for basic on/off elevation:

AnimatedLocationPin(
  isElevated: _isPanning,
)

Advanced Mode (PinState) #

Use state for enhanced animations with smoother transitions:

AnimatedLocationPin(
  state: _isPanning ? PinState.elevated : PinState.idle,
)

Examples #

Example 1: Basic Location Picker #

LatLngLocationPicker(
  enabled: true,
  onLocationPicked: (location) {
    print('Location: ${location.latitude}, ${location.longitude}');
  },
  child: GoogleMap(
    initialCameraPosition: CameraPosition(
      target: LatLng(0, 0),
      zoom: 10,
    ),
  ),
)

Example 2: With Controller #

final controller = LatLngLocationPickerController();

// Enable picker
controller.enable?.call();

// Disable picker
controller.disable?.call();

// Check state
if (controller.isEnabled) {
  // Picker is active
}

Example 3: Custom Styled Pin #

LatLngLocationPicker(
  enabled: true,
  pinWidget: AnimatedLocationPin(
    isElevated: _isPanning,
    color: Colors.purple,
    innerColor: Colors.yellow,
    size: 60,
    stickHeight: 30,
    stickBorderRadius: 4,
  ),
  child: GoogleMap(
    initialCameraPosition: CameraPosition(
      target: LatLng(37.7749, -122.4194),
      zoom: 14,
    ),
  ),
)

Example 4: Using AnimatePinData #

LatLngLocationPicker(
  enabled: true,
  pinData: AnimatePinData(
    color: Colors.green,
    innerColor: Colors.white,
    stickColor: Colors.greenAccent,
    size: 55,
    stickHeight: 28,
    stickBorderRadius: 6.0,
    shadowColor: Colors.black45,
    shadowDistance: 12.0,
  ),
  onLocationPicked: (location) {
    print('Picked: ${location.latitude}, ${location.longitude}');
  },
  child: GoogleMap(
    initialCameraPosition: CameraPosition(
      target: LatLng(37.7749, -122.4194),
      zoom: 14,
    ),
  ),
)

Features #

• Smooth physics-based animations
• Customizable pin appearance
• Haptic feedback support
• Controller for programmatic control
• Works as a simple wrapper - no map recreation needed
• Preserves all GoogleMap properties and callbacks
• Two animation modes (simple boolean and advanced state-based)
• Dynamic shadow effects

Author #

Paul Jeremiah
Twitter: @edeme_kong

Support #

If you find this package helpful, consider buying me a coffee! ☕

License #

This project is licensed under the MIT License - see the LICENSE file for details.

Contributing #

Contributions are welcome! Please feel free to submit a Pull Request.

map_latlng_picker #