Flutter开发中WebView加载网页无法获取定位权限如何解决？

你已经为App配置了系统级定位权限，但webview_flutter组件默认没有实现网页定位权限的申请响应逻辑，网页发起的navigator.geolocation请求会被直接拦截，既不会触发系统权限弹窗，也不会把定位结果回传给WebView内的网页。

1. 确认基础权限配置 #

Android端 #

在android/app/src/main/AndroidManifest.xml中添加以下权限：

<!-- 基础定位权限 -->
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<!-- Android 12+ 适配 -->
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

iOS端 #

在ios/Runner/Info.plist中添加定位权限说明：

<key>NSLocationWhenInUseUsageDescription</key>
<string>需要使用定位权限为您提供周边服务</string>

2. 新增前置定位权限申请 #

在打开WebView页面之前，主动调用系统定位权限申请，推荐使用permission_handler库实现：
首先在pubspec.yaml中添加依赖：

dependencies:
  webview_flutter: ^4.4.0
  permission_handler: ^11.0.1

在页面初始化阶段申请权限：

import 'package:permission_handler/permission_handler.dart';

@override
void initState() {
  super.initState();
  // 前置申请定位权限
  Permission.locationWhenInUse.request();
}

3. 配置WebView定位权限回调 #

在原有WebView组件中新增onGeolocationPermissionsShowPrompt回调，响应网页的定位权限请求：

SafeArea(
  child: WebView(
    javascriptMode: JavascriptMode.unrestricted,
    initialUrl: flutterUrl,
    onWebViewCreated: (WebViewController webViewController) {
      _controller = webViewController;
    },
    // 新增：响应网页定位权限请求
    onGeolocationPermissionsShowPrompt: (String origin, GeolocationPermissionsRequest request) async {
      // 授予当前网页定位权限
      request.allow(origin: origin);
    },
  ),
)

• 需确保webview_flutter版本在4.0及以上，低版本组件不支持onGeolocationPermissionsShowPrompt回调
• 如果Android端出现定位不生效的情况，可以在初始化WebView时添加配置WebView.platform = SurfaceAndroidWebView()
• 若用户拒绝了定位权限，可以根据业务需求补充权限引导逻辑

内容的提问来源于stack exchange，提问作者Arpit Jai