Flutter中的Deep Linking：实现深度链接

Flutter中的Deep Linking：实现深度链接

5 回复

使用uni_links插件，监听并处理Android和iOS的深度链接。

更多关于Flutter中的Deep Linking：实现深度链接的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中实现深度链接，可以使用uni_links包。配置AndroidManifest.xml和Info.plist，处理传入的链接，并在MaterialApp中设置onGenerateRoute来导航到相应页面。

在Flutter中实现深度链接（Deep Linking），可以通过以下步骤进行：

  1. 添加依赖：在pubspec.yaml中添加flutter_deep_linking或uni_links等第三方库依赖。

  2. 配置Android和iOS：

    • Android：在AndroidManifest.xml中配置<intent-filter>，处理自定义URL Scheme或App Links。
    • iOS：在Info.plist中配置CFBundleURLTypes，处理URL Scheme。

  3. 处理链接：在Dart代码中使用onGenerateRoute或onUnknownRoute处理传入的链接，解析URL并导航到相应页面。

  4. 测试：通过命令行或浏览器测试深度链接是否正常工作。

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

Flutter中通过Uri路由实现深度链接，配置AndroidManifest或Info.plist，并使用Navigator.pushNamed处理链接。

在Flutter中，深度链接（Deep Linking） 是一种允许用户通过点击链接直接跳转到应用内特定页面的技术。它通常用于从外部（如浏览器、邮件或其他应用）直接打开应用的特定内容。

实现深度链接的步骤

  1. 配置Android和iOS的URL Scheme或App Links/Universal Links

    • Android: 在 AndroidManifest.xml 中配置 <intent-filter>。
    • iOS: 在 Info.plist 中配置 CFBundleURLTypes。

  2. 使用flutter_deeplink或uni_links包

    • 这些包可以帮助你处理深度链接的解析和路由。

  3. 处理深度链接

    • 在应用中解析深度链接，并根据链接参数跳转到相应的页面。

示例代码

  1. 添加依赖 在 pubspec.yaml 中添加 uni_links 包：

    dependencies:
  uni_links: ^0.5.1

  2. 配置Android 在 AndroidManifest.xml 中添加：

    <intent-filter android:autoVerify="true">
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="https" android:host="example.com" />
</intent-filter>

  3. 配置iOS 在 Info.plist 中添加：

    <key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleTypeRole</key>
        <string>Editor</string>
        <key>CFBundleURLName</key>
        <string>com.example.app</string>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>example</string>
        </array>
    </dict>
</array>

  4. 处理深度链接 在 main.dart 中处理深度链接：

    import 'package:flutter/material.dart';
import 'package:uni_links/uni_links.dart';
import 'dart:async';

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

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

class _MyAppState extends State<MyApp> {
  StreamSubscription _sub;

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

  @override
  void dispose() {
    _sub.cancel();
    super.dispose();
  }

  Future<void> initUniLinks() async {
    try {
      final initialLink = await getInitialLink();
      if (initialLink != null) {
        _handleDeepLink(initialLink);
      }

      _sub = getUriLinksStream().listen((Uri uri) {
        _handleDeepLink(uri.toString());
      }, onError: (err) {
        print('Error: $err');
      });
    } catch (e) {
      print('Error: $e');
    }
  }

  void _handleDeepLink(String link) {
    // 根据链接跳转到相应页面
    print('Deep link: $link');
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Deep Linking Example')),
        body: Center(child: Text('Welcome to the app!')),
      ),
    );
  }
}

总结

通过以上步骤，你可以在Flutter应用中实现深度链接功能，使用户能够直接通过链接跳转到应用的特定页面。

回到顶部