webview_flutter点击社交链接出现net::err_unknown_url_scheme错误求解决

核心原因 #

Facebook、Telegram、Instagram的个人主页链接使用的是自定义URL Scheme（如fb://、tg://、instagram://），而webview_flutter默认仅支持http/https协议加载，直接点击会触发net::err_unknown_url_scheme错误。解决思路是拦截这些自定义Scheme，通过第三方工具跳转至对应APP。

具体实现步骤 #

1. 添加依赖 #

在pubspec.yaml中引入所需包：

dependencies:
  flutter:
    sdk: flutter
  webview_flutter: ^4.4.0 # 使用最新稳定版
  url_launcher: ^6.2.2 # 用于跳转外部APP

执行flutter pub get安装依赖。

2. 配置WebView拦截逻辑 #

在WebView的navigationDelegate中拦截非http/https的请求，用url_launcher处理跳转：

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:url_launcher/url_launcher.dart';

class CustomWebView extends StatefulWidget {
  final String loadUrl;
  const CustomWebView({super.key, required this.loadUrl});

  @override
  State<CustomWebView> createState() => _CustomWebViewState();
}

class _CustomWebViewState extends State<CustomWebView> {
  late WebViewController _webController;

  @override
  void initState() {
    super.initState();
    _webController = WebViewController()
      ..loadRequest(Uri.parse(widget.loadUrl))
      ..setNavigationDelegate(
        NavigationDelegate(
          onNavigationRequest: (NavigationRequest request) async {
            final uri = Uri.parse(request.url);
            // 拦截非http/https的自定义Scheme
            if (!['http', 'https'].contains(uri.scheme)) {
              try {
                // 检查是否能打开对应APP
                if (await canLaunchUrl(uri)) {
                  await launchUrl(uri);
                } else {
                  // 提示用户未安装应用
                  ScaffoldMessenger.of(context).showSnackBar(
                    const SnackBar(content: Text('无法打开该链接，请检查是否安装对应应用')),
                  );
                }
              } catch (e) {
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(content: Text('打开链接失败：$e')),
                );
              }
              // 阻止WebView加载该链接
              return NavigationDecision.prevent;
            }
            // 允许http/https链接正常加载
            return NavigationDecision.navigate;
          },
        ),
      );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('网页视图')),
      body: WebViewWidget(controller: _webController),
    );
  }
}

3. 平台配置（必填） #

为了让url_launcher能正常检测和打开第三方APP，需要在Android和iOS的配置文件中添加权限声明：

Android（android/app/src/main/AndroidManifest.xml）

在<manifest>标签内添加：

<queries>
    <!-- 允许检测Facebook、Telegram、Instagram应用 -->
    <intent>
        <action android:name="android.intent.action.VIEW" />
        <data android:scheme="fb" />
    </intent>
    <intent>
        <action android:name="android.intent.action.VIEW" />
        <data android:scheme="tg" />
    </intent>
    <intent>
        <action android:name="android.intent.action.VIEW" />
        <data android:scheme="instagram" />
    </intent>
</queries>

iOS（ios/Runner/Info.plist）

在<dict>标签内添加：

<key>LSApplicationQueriesSchemes</key>
<array>
    <string>fb</string>
    <string>tg</string>
    <string>instagram</string>
</array>

额外优化（可选） #

如果需要针对不同平台做更精准的处理，比如用户未安装APP时引导至应用商店，可以在catch或canLaunchUrl返回false的分支中，跳转至对应应用的商店链接（如App Store或Google Play）。

内容的提问来源于stack exchange，提问作者Leonardo ramirez toro