Flutter中如何获取特定页面/组件的URL以实现分享跳转？

核心思路 #

通过**深度链接（Deep Link）**实现：生成包含帖子ID的专属URL，分享后用户点击可直接唤起应用并跳转到对应帖子页面，和社交平台的帖子链接逻辑一致。

步骤1：配置深度链接 #

需分别为Android和iOS配置支持自定义URL Scheme或更友好的HTTPS通用链接。

Android配置（App Links）

在android/app/src/main/AndroidManifest.xml的<activity>标签内添加：

<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" />
    <!-- 替换为你的业务域名，示例：https://yourapp.com/posts -->
    <data android:scheme="https" android:host="yourapp.com" android:pathPrefix="/posts" />
</intent-filter>

iOS配置（Universal Links）

在ios/Runner/Info.plist中添加：

<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>yourapp</string> <!-- 自定义Scheme，格式：yourapp://posts/123 -->
        </array>
    </dict>
</array>
<!-- 通用链接配套配置，需结合苹果开发者后台的关联文件 -->
<key>NSUserActivityTypes</key>
<array>
    <string>NSUserActivityTypeBrowsingWeb</string>
</array>

步骤2：路由与Deep Link解析 #

用go_router（Flutter官方推荐路由包）管理路由并处理外部链接：

1. 添加依赖到pubspec.yaml：

dependencies:
  go_router: ^12.0.0
  share_plus: ^7.0.0

2. 核心代码实现：

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:share_plus/share_plus.dart';

// 帖子详情页
class PostDetailPage extends StatelessWidget {
  final String postId;
  const PostDetailPage({super.key, required this.postId});

  @override
  Widget build(BuildContext context) {
    // 生成分享用的HTTPS链接
    final shareUrl = "https://yourapp.com/posts/$postId";

    return Scaffold(
      appBar: AppBar(title: const Text("帖子详情")),
      body: Column(
        children: [
          Text("当前帖子ID：$postId"),
          ElevatedButton(
            onPressed: () async {
              // 调用系统分享能力
              await Share.share("推荐你看这篇帖子：$shareUrl");
            },
            child: const Text("分享帖子"),
          )
        ],
      ),
    );
  }
}

// 路由配置
final router = GoRouter(
  routes: [
    GoRoute(
      path: '/',
      builder: (context, state) => const HomePage(), // 首页组件
    ),
    GoRoute(
      path: '/posts/:postId', // 动态路由参数接收postId
      builder: (context, state) {
        final postId = state.pathParameters['postId']!;
        return PostDetailPage(postId: postId);
      },
    ),
  ],
  // 解析外部Deep Link并跳转对应页面
  redirect: (context, state) {
    final uri = state.uri;
    if (uri.host == 'yourapp.com' && uri.path.startsWith('/posts/')) {
      final postId = uri.pathSegments[1];
      return '/posts/$postId';
    }
    return null;
  },
);

// 应用入口Widget
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerConfig: router,
      title: '帖子分享Demo',
    );
  }
}

步骤3：测试分享与跳转 #

1. 在帖子详情页点击分享按钮，将生成的URL发送给好友；
2. 好友点击URL后，若已安装应用则直接跳转到对应帖子页面；若未安装，可引导至应用商店或网页版帖子页面。

注意事项 #

• 通用链接/App Links需要配置域名验证（Android的assetlinks.json、iOS的apple-app-site-association文件），确保系统识别链接归属你的应用；
• 若不想用HTTPS链接，也可使用自定义Scheme（如yourapp://posts/123），但这类链接在部分场景下可能被浏览器拦截，用户体验不如通用链接。

内容的提问来源于stack exchange，提问作者Hezbr Makeen Al-humaidi