Flutter如何实现deep links配置

在Flutter项目中配置deep links时遇到问题，按照官方文档添加了AndroidManifest.xml和Info.plist的相关配置，但点击链接后无法正常跳转到指定页面。具体表现为：

  1. Android端测试时，链接只能在浏览器打开，无法直接启动App
  2. iOS端报错"Could not find matching handler for deep link"
  3. 已确认使用了uni_links插件并正确初始化路由

请问完整的deep links配置流程应该是怎样的？是否需要额外处理应用冷启动场景？如何验证配置是否生效？

2 回复

Flutter中配置deep links需在pubspec.yaml添加flutter_deeplinking插件，并在AndroidManifest.xml和Info.plist中分别配置intent filters与URL schemes。通过onGenerateRoute处理路由逻辑。

更多关于Flutter如何实现deep links配置的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中配置deep links（深度链接）主要涉及两个平台的配置和Flutter代码处理。以下是具体步骤：

1. Android配置

修改 android/app/src/main/AndroidManifest.xml：

<activity
    android:name=".MainActivity"
    android:launchMode="singleTop">
    <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.com" />
    </intent-filter>
</activity>

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

3. Flutter代码处理

使用 uni_links 包：

在 pubspec.yaml 中添加依赖：

dependencies:
  uni_links: ^0.5.1

主要代码实现：

import 'package:uni_links/uni_links.dart';

class DeepLinkHandler {
  StreamSubscription? _sub;
  
  void initDeepLinks() {
    // 处理初始链接
    getInitialLink().then(_handleLink);
    
    // 监听链接变化
    _sub = linkStream.listen(_handleLink, onError: (err) {
      // 处理错误
    });
  }
  
  void _handleLink(String? link) {
    if (link != null) {
      // 解析链接并导航到对应页面
      Uri uri = Uri.parse(link);
      String path = uri.path;
      Map<String, String> params = uri.queryParameters;
      
      // 根据路径和参数进行页面跳转
      _navigateToScreen(path, params);
    }
  }
  
  void _navigateToScreen(String path, Map<String, String> params) {
    // 实现页面导航逻辑
    if (path.contains('/product')) {
      // 跳转到商品详情页
      String productId = params['id'] ?? '';
      // Navigator.push(...);
    }
  }
  
  void dispose() {
    _sub?.cancel();
  }
}

4. 使用示例

在 main.dart 中初始化：

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final DeepLinkHandler _deepLinkHandler = DeepLinkHandler();
  
  @override
  void initState() {
    super.initState();
    _deepLinkHandler.initDeepLinks();
  }
  
  @override
  void dispose() {
    _deepLinkHandler.dispose();
    super.dispose();
  }
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

注意事项：

  • 测试时使用完整链接格式：yourapp://example.com/path?param=value
  • 确保Android和iOS的配置正确
  • 处理冷启动和热启动场景
  • 考虑应用未安装时的处理方案

这样就完成了Flutter中deep links的基本配置。

回到顶部