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.0

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:

Make sure your app has internet permissions
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

Contributing #

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

Fork the repository
Create your feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add some amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

License #

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

Author #

Created with ❤️ by the Flutter community

Publishing to pub.dev #

Prerequisites #

Create a Google account (if you don't have one)
Sign in to pub.dev with your Google account
Verify your email address

Prepare Your Package #

1. Update pubspec.yaml

Make sure your pubspec.yaml has:

✅ Proper name (lowercase with underscores)
✅ description (at least 60 characters recommended)
✅ version (follows semantic versioning)
✅ homepage or repository URL (optional but recommended)
✅ publish_to: 'none' removed (or set to null)

2. Required Files

Ensure you have:

✅ LICENSE file (MIT License recommended)
✅ README.md (this file)
✅ CHANGELOG.md (version history)

3. Validate Your Package

Run these commands:

# Analyze your code
flutter analyze

# Run tests (if you have any)
flutter test

# Check if package is ready for publishing
flutter pub publish --dry-run

Fix any issues reported by the dry-run command.

4. Publish to pub.dev

Once everything is ready:

flutter pub publish

You'll be prompted to:

Sign in with your Google account (first time only)
Confirm the package details
Enter y to confirm publishing

5. Verify Publication

After publishing:

Visit https://pub.dev/packages/location_webview
Wait a few minutes for the package to appear
Check that all files are correctly displayed

6. Update Your Package

For future updates:

Update the version in pubspec.yaml (following semantic versioning)
Update CHANGELOG.md with changes
Run flutter pub publish --dry-run to validate
Run flutter pub publish to publish the new version

Common Publishing Issues #

Package name already taken: Choose a different name
Missing LICENSE file: Create a LICENSE file
Invalid pubspec.yaml: Fix syntax errors
Missing description: Add a description in pubspec.yaml (at least 60 characters)
Files too large: Remove unnecessary files or use .gitignore
Missing CHANGELOG: Create a CHANGELOG.md file

Resources #

Note: Before publishing, make sure to:

Update the repository URLs in pubspec.yaml with your actual GitHub repository
Replace placeholder author information
Test the package thoroughly on both iOS and Android
Ensure all examples work correctly