location_webview 1.0.3

A Flutter package that displays an interactive map using WebView with OpenStreetMap and Leaflet, perfect for showing location coordinates with customizable styling.

location_webview

A Flutter package that displays an interactive map using WebView with OpenStreetMap and Leaflet. Perfect for showing location coordinates with customizable styling and tap-to-open directions functionality.

Features

• 🗺️ Interactive Map - Beautiful map display using OpenStreetMap and Leaflet
• 🎨 Customizable - Adjustable height and dark mode support
• 📍 Location Marker - Displays location marker with address popup
• 🧭 Automatic Directions - Opens Google Maps/Apple Maps on tap
• 👆 Custom Callbacks - Optional custom tap handler support
• 📱 Cross-Platform - Works seamlessly on both iOS and Android
• ⚡ Lightweight - No heavy map SDK dependencies

Screenshots

Installation

Add location_webview to your pubspec.yaml file:

dependencies:
  location_webview: ^1.0.3

Then run:

flutter pub get

Quick Start

import 'package:location_webview/location_webview.dart';

LocationWebView(
  lat: 25.0978092,
  lng: 55.1562957,
  address: 'Concord Tower, Dubai',
)

That's it! The map will automatically open directions when tapped.

Usage

Basic Usage

The simplest way to use LocationWebView:

LocationWebView(
  lat: 25.0978092,
  lng: 55.1562957,
  address: 'Concord Tower, Dubai',
)

With Customization

LocationWebView(
  lat: 25.0978092,
  lng: 55.1562957,
  address: 'Concord Tower, Dubai',
  height: 400,
  isDark: true,
)

With Custom Tap Handler

LocationWebView(
  lat: 25.0978092,
  lng: 55.1562957,
  address: 'Concord Tower, Dubai',
  onTap: () {
    // Your custom logic here
    print('Map tapped!');
    // Custom navigation or action
  },
)

API Reference

LocationWebView

A widget that displays an interactive map with location marker.

Constructor

const LocationWebView({
  Key? key,
  required double lat,
  required double lng,
  required String address,
  double height = 300,
  bool isDark = false,
  VoidCallback? onTap,
})

Parameters

Parameter	Type	Required	Default	Description
lat	double	✅ Yes	-	Latitude of the location
lng	double	✅ Yes	-	Longitude of the location
address	String	✅ Yes	-	Address string to display in the marker popup
height	double	❌ No	300	Height of the map widget in pixels
isDark	bool	❌ No	false	Enable dark mode styling
onTap	VoidCallback?	❌ No	null	Custom callback when map is tapped. If null, automatically opens directions

Behavior

• Automatic Directions: If onTap is not provided, tapping the map will automatically open directions in:
  • iOS: Apple Maps (via https://maps.apple.com/)
  • Android: Google Maps (via geo: intent)
  • Fallback: Google Maps web version

Complete Example

import 'package:flutter/material.dart';
import 'package:location_webview/location_webview.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Location WebView Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MapExample(),
    );
  }
}

class MapExample extends StatefulWidget {
  const MapExample({super.key});

  @override
  State<MapExample> createState() => _MapExampleState();
}

class _MapExampleState extends State<MapExample> {
  bool isDark = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Location WebView Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            LocationWebView(
              lat: 25.0978092,
              lng: 55.1562957,
              address: 'Concord Tower, Dubai',
              isDark: isDark,
              // Automatically opens directions when tapped
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  isDark = !isDark;
                });
              },
              child: const Text('Toggle Dark Mode'),
            ),
          ],
        ),
      ),
    );
  }
}

Requirements

• Flutter SDK: >= 3.0.0
• Dart SDK: >= 3.0.0
• iOS: 9.0+
• Android: API 21+ (Android 5.0+)

Platform Configuration

Android

Add internet permission to android/app/src/main/AndroidManifest.xml:

<manifest>
  <uses-permission android:name="android.permission.INTERNET"/>
  <!-- ... other permissions ... -->
</manifest>

iOS

For iOS 9+, no additional configuration is needed. The package uses https://maps.apple.com/ URLs which automatically open in Apple Maps if available.

Note: If you encounter issues:

1. Make sure your app has internet permissions
2. Run pod install in the ios directory after adding the package:

   cd ios
   pod install
   

Dependencies

This package depends on:

• flutter_inappwebview - For WebView functionality
• url_launcher - For opening directions in maps apps

Troubleshooting

Map not displaying

• Ensure you have internet connectivity
• Check that the coordinates are valid (lat: -90 to 90, lng: -180 to 180)
• Verify that your app has internet permissions

Directions not opening

• iOS: Make sure you've run pod install in the ios directory
• Android: Verify internet permission is added to AndroidManifest.xml
• Check that a maps app is installed on the device

WebView not loading

• Ensure flutter_inappwebview is properly installed
• For Android, make sure useHybridComposition: true is set (already configured)
• Check device logs for specific error messages

License

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

Author

Created with ❤️ by the Flutter community