Flutter未使用命名路由时的Deep linking实现方案咨询

太懂你这种不想大动现有路由代码的处境了——毕竟把一堆Navigator.push改成命名路由不仅麻烦，还容易引入新问题。不用重构路由表，照样能搞定深度链接，我给你一步步拆解：

1. 先搞定平台侧的基础配置 #

这一步是前提，得先让Android/iOS系统把深度链接的请求转发给你的Flutter App。

Android端配置 #

打开android/app/src/main/AndroidManifest.xml，在你的MainActivity标签内添加一个intent-filter，用来声明你的App要处理的链接Scheme和Host：

<activity
    android:name=".MainActivity"
    android:exported="true">
    <!-- 原有配置保留 -->
    <intent-filter>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <!-- 这里的scheme可以自定义，比如你的App标识 -->
        <data
            android:scheme="myapp"
            android:host="example.com" />
    </intent-filter>
</activity>

iOS端配置 #

打开ios/Runner/Info.plist，添加CFBundleURLTypes配置，声明你的App支持的URL Scheme：

<plist version="1.0">
<dict>
    <!-- 原有配置保留 -->
    <key>CFBundleURLTypes</key>
    <array>
        <dict>
            <key>CFBundleURLSchemes</key>
            <array>
                <string>myapp</string> <!-- 和Android端的scheme保持一致 -->
            </array>
        </dict>
    </array>
</dict>
</plist>

2. Flutter侧监听并解析深度链接 #

接下来要在Flutter代码里获取启动/唤起时的链接，还要监听App运行过程中被链接唤起的情况。

你可以通过两种方式获取链接：一是App冷启动时的初始链接，二是App在后台时被唤起的链接。这里我们可以用全局的NavigatorState Key来确保随时能拿到导航上下文，避免context为空的问题。

先定义一个全局导航Key：

final GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();

然后在main函数和App的生命周期里处理链接：

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  // 获取冷启动时的初始深度链接
  final initialLink = await _getInitialDeepLink();
  runApp(MyApp(initialLink: initialLink));
}

// 模拟获取初始链接的方法（实际可以通过平台通道或插件实现，不用纠结具体实现方式）
Future<String?> _getInitialDeepLink() async {
  // 这里只是示例，实际根据你的实现来写
  return null;
}

class MyApp extends StatefulWidget {
  final String? initialLink;
  const MyApp({super.key, this.initialLink});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with WidgetsBindingObserver {
  StreamSubscription? _linkSubscription;

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
    // 处理冷启动的初始链接
    if (widget.initialLink != null) {
      _handleDeepLink(widget.initialLink!);
    }
    // 监听App运行中被链接唤起的情况
    _linkSubscription = _deepLinkStream.listen((String? link) {
      if (link != null) {
        _handleDeepLink(link);
      }
    });
  }

  // 模拟深度链接的监听流
  Stream<String?> get _deepLinkStream => Stream.empty();

  // 核心：解析链接并处理导航
  void _handleDeepLink(String link) {
    final uri = Uri.parse(link);
    // 解析链接里的路径和参数，比如 `myapp://example.com/detail?id=123`
    final targetPage = uri.path;
    final itemId = uri.queryParameters['id'];

    // 根据解析结果，直接用你熟悉的`Navigator.push`方式导航
    if (targetPage == '/detail' && itemId != null) {
      navigatorKey.currentState?.push(
        MaterialPageRoute(
          builder: (_) => DetailPage(itemId: itemId),
        ),
      );
    } else if (targetPage == '/settings') {
      navigatorKey.currentState?.push(
        MaterialPageRoute(builder: (_) => const SettingsPage()),
      );
    }
    // 还可以根据链接参数直接执行前置逻辑，比如先验证参数再导航
  }

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    super.didChangeAppLifecycleState(state);
    // 当App从后台回到前台时，检查是否有新的深度链接
    if (state == AppLifecycleState.resumed) {
      _checkForNewDeepLink();
    }
  }

  Future<void> _checkForNewDeepLink() async {
    final link = await _getInitialDeepLink();
    if (link != null) {
      _handleDeepLink(link);
    }
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    _linkSubscription?.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      navigatorKey: navigatorKey, // 绑定全局导航Key
      home: const HomePage(),
    );
  }
}

3. 页面内的逻辑执行 #

导航到目标页面后，你可以在页面的initState里执行对应的业务逻辑，比如根据链接传的参数加载数据：

class DetailPage extends StatefulWidget {
  final String itemId;
  const DetailPage({super.key, required this.itemId});

  @override
  State<DetailPage> createState() => _DetailPageState();
}

class _DetailPageState extends State<DetailPage> {
  @override
  void initState() {
    super.initState();
    // 在这里执行页面的业务逻辑，比如加载详情数据
    _loadItemDetail(widget.itemId);
  }

  void _loadItemDetail(String itemId) {
    // 示例：根据ID请求接口、更新UI
    print('开始加载ID为$itemId的商品详情...');
    // 你的实际业务逻辑写在这里
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('商品详情')),
      body: Center(child: Text('当前商品ID：${widget.itemId}')),
    );
  }
}

一些需要注意的细节 #

• 全局navigatorKey一定要在MaterialApp里正确绑定，不然会出现导航上下文为空的问题
• 解析链接时要做异常处理，比如链接格式错误、参数缺失的情况，避免崩溃
• 如果需要控制导航栈的结构（比如回到根页面再打开目标页），可以用Navigator.pushAndRemoveUntil替代push
• 平台侧的Scheme尽量设置得唯一，避免和其他App冲突

内容来源于stack exchange