Flutter如何实现深度链接（deep link）功能

在Flutter中如何正确配置深度链接（deep link）功能？我尝试了官方文档的方法，但在Android和iOS平台上都无法正常跳转到指定页面。具体表现为：

  1. Android端点击链接后直接打开应用，但没有路由到目标页面
  2. iOS端则在Safari中显示"无法打开URL"
    已确认在AndroidManifest.xml和Info.plist中配置了相关intent-filter和URL scheme，也使用了uni_links插件处理路由逻辑。请问是否还需要其他关键配置步骤？如何验证深度链接是否真正生效？
2 回复

Flutter实现深度链接需使用uni_links插件。步骤如下：

  1. 配置Android的intent-filter和iOS的URL types。
  2. 监听链接：getInitialLink（冷启动）和linkStream（运行中）。
  3. 解析链接并导航到对应页面。

更多关于Flutter如何实现深度链接（deep link）功能的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中实现深度链接（Deep Link）功能可以通过以下步骤完成：

1. 配置URL Scheme（Android & iOS）

  • Android：在 android/app/src/main/AndroidManifest.xml 中添加 intent-filter：
    <activity android:name=".MainActivity">
    <intent-filter>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <data android:scheme="yourapp" android:host="example" />
    </intent-filter>
</activity>
  • iOS：在 ios/Runner/Info.plist 中添加：
    <key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleTypeRole</key>
        <string>Editor</string>
        <key>CFBundleURLName</key>
        <string>yourapp</string>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>yourapp</string>
        </array>
    </dict>
</array>

2. 使用 uni_links 包处理链接

添加依赖到 pubspec.yaml：

dependencies:
  uni_links: ^0.5.1

在代码中监听链接：

import 'package:uni_links/uni_links.dart';

class DeepLinkHandler {
  StreamSubscription? _sub;

  void initDeepLinks() {
    _sub = getUriLinksStream().listen((Uri uri) {
      // 处理URI，例如导航到对应页面
      if (uri.path == '/product') {
        String id = uri.queryParameters['id'] ?? '';
        Navigator.push(context, MaterialPageRoute(builder: (_) => ProductPage(id)));
      }
    });
  }

  void dispose() {
    _sub?.cancel();
  }
}

3. 处理应用启动时的链接

在 main.dart 的 initState 中检查初始链接：

void initState() {
  super.initState();
  initUniLinks();
}

Future<void> initUniLinks() async {
  try {
    Uri? initialUri = await getInitialUri();
    if (initialUri != null) {
      // 处理初始深度链接
    }
  } catch (e) {
    print('Error: $e');
  }
}

4. 测试深度链接

  • Android：
    adb shell am start -W -a android.intent.action.VIEW -d "yourapp://example/product?id=123" com.example.yourapp
  • iOS：在Safari中输入 yourapp://example/product?id=123。

注意事项：

  • 确保URL Scheme唯一，避免冲突。
  • 处理权限和错误情况。
  • 对于Android App Links（HTTPS），需额外配置数字资产链接。

通过以上步骤，即可在Flutter应用中实现深度链接功能。

回到顶部