Flutter中flutter_inappwebview初始化后无法打开Deep Link的问题

针对你使用flutter_inappwebview 5.4.4+3版本遇到的Deep Link跳转问题，可通过以下步骤解决：

1. 添加依赖 #

先在pubspec.yaml中引入url_launcher插件，用于处理外部应用跳转：

dependencies:
  flutter_inappwebview: ^5.4.4+3
  url_launcher: ^6.1.12 # 版本可按需选择

2. 拦截URL请求并处理Deep Link #

利用shouldOverrideUrlLoading回调拦截WebView的URL请求，识别Deep Link后调用系统能力跳转外部应用：

import 'package:flutter_inappwebview/flutter_inappwebview.dart';
import 'package:url_launcher/url_launcher.dart';

InAppWebView(
  initialUrlRequest: URLRequest(url: Uri.parse('https://www.google.com/contact/')),
  shouldOverrideUrlLoading: (controller, navigationAction) async {
    final uri = navigationAction.request.url!;
    
    // 判断是否为非HTTP/HTTPS的Deep Link（含自定义scheme或第三方应用scheme）
    if (!uri.isScheme('http') && !uri.isScheme('https')) {
      if (await canLaunchUrl(uri)) {
        await launchUrl(uri);
        // 阻止WebView加载该URL，避免无意义的空白页
        return NavigationActionPolicy.CANCEL;
      }
    }
    
    // 正常HTTP/HTTPS请求交由WebView处理
    return NavigationActionPolicy.ALLOW;
  },
)

3. 平台关键配置 #

Android端 #

在android/app/src/main/AndroidManifest.xml中添加应用查询权限，允许访问目标第三方应用：

<queries>
  <!-- 示例：允许查询YouTube、LinkedIn应用 -->
  <package android:name="com.google.android.youtube" />
  <package android:name="com.linkedin.android" />
  <!-- 针对自定义scheme的声明 -->
  <intent>
    <action android:name="android.intent.action.VIEW" />
    <data android:scheme="myapp" />
  </intent>
</queries>

iOS端 #

在ios/Runner/Info.plist中添加允许查询的应用scheme：

<key>LSApplicationQueriesSchemes</key>
<array>
  <string>myapp</string>
  <string>youtube</string>
  <string>linkedin</string>
</array>

4. 额外说明 #

• 若为自定义Deep Link（如myapp://openapp?type=...），需确保自身应用已正确配置Deep Link处理逻辑（Android的intent-filter、iOS的URL Types）。
• 测试时需确认目标应用已安装在设备上，否则canLaunchUrl会返回false。

内容的提问来源于stack exchange，提问作者Huu Bao Nguyen