Flutter中如何结合GoRouter实现Deep Linking并保留GetX路由？

1. GoRouter配置Deep Linking路由的步骤 #

先在GoRouter中定义对应Deep Link的路由规则，再完成Android和iOS的平台配置：

代码层面配置GoRouter #

final goRouter = GoRouter(
  initialLocation: '/',
  routes: [
    GoRoute(
      path: '/',
      builder: (context, state) => const HomePage(),
    ),
    // 处理商品详情页的Deep Link路由
    GoRoute(
      path: '/product/:id',
      builder: (context, state) {
        final productId = state.pathParameters['id']!;
        // 延迟调用GetX导航，避免上下文冲突
        WidgetsBinding.instance.addPostFrameCallback((_) {
          Get.to(() => ProductDetailPage(id: productId));
        });
        // 返回临时空页面，满足GoRouter的Widget返回要求
        return const Scaffold(body: SizedBox.shrink());
      },
    ),
  ],
  // 处理未知路由
  errorBuilder: (context, state) => const NotFoundPage(),
);

平台配置 #

• Android：在android/app/src/main/AndroidManifest.xml的<activity>标签内添加intent-filter：

<intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <!-- 替换为你的自定义Scheme，比如myapp:// -->
    <data android:scheme="myapp" />
</intent-filter>

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

<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>myapp</string> <!-- 自定义Scheme -->
        </array>
    </dict>
</array>
<key>LSApplicationQueriesSchemes</key>
<array>
    <string>myapp</string>
</array>

2. 保留GetX路由优势的可行性 #

完全可以保留GetX路由的所有优势，核心思路是让GoRouter仅作为Deep Link的入口层：外部Deep Link触发后，由GoRouter解析路径和参数，再转发给GetX的路由系统处理页面跳转。

现有项目中使用的Get.to()、Get.offAll()、Get.back()等GetX导航方法可以继续正常使用，无需修改。GoRouter只负责接收外部Deep Link请求，不干涉内部页面导航，这样既利用了GoRouter对Deep Link的原生支持，又保留了GetX路由无需上下文、传参简单、状态联动便捷等优势。

3. 集成最佳实践与完整示例 #

核心集成逻辑 #

1. GoRouter仅处理外部Deep Link的路由入口，不负责内部页面导航。
2. 在GoRouter的路由builder中，通过addPostFrameCallback延迟调用GetX导航，避免上下文冲突。
3. 返回临时空页面让GoRouter完成初始化，再由GetX替换为目标页面，防止栈混乱。

完整代码示例 #

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'GetX + GoRouter Deep Link Demo',
      debugShowCheckedModeBanner: false,
      // 嵌套MaterialApp.router，同时保留GetMaterialApp的特性
      home: MaterialApp.router(
        routerConfig: goRouter,
        theme: ThemeData(primarySwatch: Colors.blue),
      ),
    );
  }
}

final goRouter = GoRouter(
  routes: [
    GoRoute(
      path: '/',
      builder: (context, state) => const HomePage(),
    ),
    GoRoute(
      path: '/product/:id',
      builder: (context, state) {
        final productId = state.pathParameters['id']!;
        WidgetsBinding.instance.addPostFrameCallback((_) {
          Get.to(() => ProductDetailPage(id: productId));
        });
        return const Scaffold(body: SizedBox.shrink());
      },
    ),
    GoRoute(
      path: '/profile',
      builder: (context, state) {
        WidgetsBinding.instance.addPostFrameCallback((_) {
          Get.offAll(() => const ProfilePage());
        });
        return const Scaffold(body: SizedBox.shrink());
      },
    ),
  ],
);

// 现有GetX页面示例
class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Home')),
      body: Center(
        child: ElevatedButton(
          // 继续使用GetX内部导航
          onPressed: () => Get.to(() => const ProfilePage()),
          child: const Text('Go to Profile (GetX)'),
        ),
      ),
    );
  }
}

class ProductDetailPage extends StatelessWidget {
  final String id;
  const ProductDetailPage({super.key, required this.id});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Product #$id')),
      body: Center(child: Text('Product Detail: $id')),
    );
  }
}

class ProfilePage extends StatelessWidget {
  const ProfilePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Profile')),
      body: Center(
        child: ElevatedButton(
          onPressed: () => Get.back(),
          child: const Text('Back to Home'),
        ),
      ),
    );
  }
}

测试注意事项 #

• 测试Deep Link时可通过命令行触发：
  • Android：adb shell am start -W -a android.intent.action.VIEW -d "myapp://product/123" com.your.package.name
  • iOS：xcrun simctl openurl booted myapp://product/123
• 复杂参数可通过state.queryParameters解析，比如myapp://product/123?name=test

内容的提问来源于stack exchange，提问作者Nahom Derese